本文向大家描述一下CSS文件可维护、可读性提高指南四则，主要包括CSS样式文件分解，为CSS文件建立索引，格式化CSS属性等内容，相信本文介绍一定会让你有所收获。
CSS文件可维护、可读性提高指南四则
在大多数文章中，我们并未特别注意CSS文件的可维护与可读性的问题，当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出四则技巧提高CSS文件可维护性的方法，以此作为指南，以一种较好的CSS样式组织习惯来进行WEB前端开发。
一、CSS样式文件分解
对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。
而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的masterstylesheet就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，masterstylesheet使用了最常见的一种。
ExampleSourceCode
- @import"reset.css";
- @import"layout.css";
- @import"colors.css";
- @import"typography.css";
- @import"flash.css";
- /*@import"debugging.css";*/
同时对于大型项目，你也可以加上CSS文件的升级标志或者一些诊断等其他措施，这里不再详述。大家注意在实现工作中总结与思考，也欢迎多参考51cto.com的相关文章。
二、为CSS文件建立索引
为了能够迅速的了解整个CSS文件的结构，在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引，结构上的id和class都可以成为该树的一个分支。
ExampleSourceCode
- [Layout]
- *body
- +Header/#header
- +Content/#content
- -Leftcolumn/#leftcolumn
- -Rightcolumn/#rightcolumn
- -Sidebar/#sidebar
- -RSS/#rss
- -Search/#search
- -Boxes/.box
- -Sideblog/#sideblog
- +Footer/#footer
- Navigation#navbar
- Advertisements.ads
- Contentheaderh2
或者也可以这样：
ExampleSourceCode
[Contents]
- 1.Body
- 2.Header/#header
- 2.1.Navigation/#navbar
- 3.Content/#content
- 3.1.Leftcolumn/#leftcolumn
- 3.2.Rightcolumn/#rightcolumn
- 3.3.Sidebar/#sidebar
- 3.3.1.RSS/#rss
- 3.3.2.Search/#search
- 3.3.3.Boxes/.box
- 3.3.4.Sideblog/#sideblog
- 3.3.5.Advertisements/.ads
- 4.Footer/#footer
为CSS文件建立索引的另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至RSS部分你只需要简单的搜索。
ExampleSourceCode [Contents]
- 1.Body
- 2.Header/#header
- 3.Navigation/#navbar
- 4.Content/#content
- 5.Leftcolumn/#leftcolumn
- 6.Rightcolumn/#rightcolumn
- 7.Sidebar/#sidebar
- 8.RSS/#rss
- 9.Search/#search
- 10.Boxes/.box
- 11.Sideblog/#sideblog
- 12.Advertisements/.ads
- 13.Footer/#footer
- /*--[8.RSS/#rss]--*/
- #rss{...}
- #rssimg{...}
定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。您还可以参考下面的文章。
广州网站建设,网站建设,广州网页设计,广州网站设计
