CSS文件的可维护、可读性技巧_在使用 css 时,为了代码的可读性和可维护性,你是如何组织 css 代码的-CSDN博客

　　本文向大家描述一下 CSS 文件可维护、可读性提高指南四则，主要包括 CSS 样式文件分解，为 CSS 文件建立索引，格式化 CSS 属性等内容，相信本文介绍一定会让你有所收获。

　　 CSS 文件可维护、可读性提高指南四则

　　在大多数文章中，我们并未特别注意 CSS 文件的可维护与可读性的问题，当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出四则技巧提高 CSS 文件可维护性的方法，以此作为指南，以一种较好的 CSS 样式组织习惯来进行 WEB 前端开发。

　　 一、CSS样式文件分解

　　对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。

　　而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的 masterstylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种， masterstylesheet 使用了最常见的一种。

　　 ExampleSourceCode

1.                         　　@import"reset．css"；

2.

3.                         　　@import"layout．css"；

4.

5.                         　　@import"colors．css"；

6.

7.                         　　@import"typography．css"；

8.

9.                         　　@import"flash．css"；

10.

11.                      　　/*@import"debugging．css"；*/

12.

　　同时对于大型项目，你也可以加上 CSS 文件的升级标志或者一些诊断等其他措施，这里不再详述。大家注意在实现工作中总结与思考，也欢迎多参考 51cto ． com 的相关文章。

　　二、为CSS文件建立索引

　　为了能够迅速的了解整个 CSS 文件的结构，在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引，结构上的 id 和 class 都可以成为该树的一个分支。

　　 ExampleSourceCode

1.                         　　[Layout]

2.

3.                         　　*body

4.

5.                         　　＋Header/#header

6.

7.                         　　＋Content/#content

8.

9.                         　　－Leftcolumn/#leftcolumn

10.

11.                      　　－Rightcolumn/#rightcolumn

12.

13.                      　　－Sidebar/#sidebar

14.

15.                      　　－RSS/#rss

16.

17.                      　　－Search/#search

18.

19.                      　　－Boxes/．box

20.

21.                      　　－Sideblog/#sideblog

22.

23.                      　　＋Footer/#footer

24.

25.                      　　Navigation#navbar

26.

27.                      　　Advertisements．ads

28.

29.                      　　Contentheaderh2

30.

　　或者也可以这样：

　　 ExampleSourceCode

　　 [Contents]

1.                         　　1．Body

2.

3.                         　　2．Header/#header

4.

5.                         　　2．1．Navigation/#navbar

6.

7.                         　　3．Content/#content

8.

9.                         　　3．1．Leftcolumn/#leftcolumn

10.

11.                      　　3．2．Rightcolumn/#rightcolumn

12.

13.                      　　3．3．Sidebar/#sidebar

14.

15.                      　　3．3．1．RSS/#rss

16.

17.                      　　3．3．2．Search/#search

18.

19.                      　　3．3．3．Boxes/．box

20.

21.                      　　3．3．4．Sideblog/#sideblog

22.

23.                      　　3．3．5．Advertisements/．ads

24.

25.                      　　4．Footer/#footer

26.

　　为 CSS 文件建立索引的另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至 RSS 部分你只需要简单的搜索。

　　 ExampleSourceCode

　　 [Contents]

1.                         　　1．Body

2.

3.                         　　2．Header/#header

4.

5.                         　　3．Navigation/#navbar

6.

7.                         　　4．Content/#content

8.

9.                         　　5．Leftcolumn/#leftcolumn

10.

11.                      　　6．Rightcolumn/#rightcolumn

12.

13.                      　　7．Sidebar/#sidebar

14.

15.                      　　8．RSS/#rss

16.

17.                      　　9．Search/#search

18.

19.                      　　10．Boxes/．box

20.

21.                      　　11．Sideblog/#sideblog

22.

23.                      　　12．Advertisements/．ads

24.

25.                      　　13．Footer/#footer

26.

27.                      　　/*－－[8．RSS/#rss]－－*/

28.

29.                      　　#rss{．．．}

30.

31.                      　　#rssimg{．．．}

32.

　　定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。您还可以参考下面的文章。

　　三、格式化CSS属性

　　当我们编写代码的时候，使用一些特殊的编码风格会对提高 CSS 代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面，另外一部分则更喜欢将类似浮动和定位的更 “ 重要 ” 的属性放在前面。类似的，也可以将页面元素按照它在布局中的结构进行排序：

　　 ExampleSourceCode

1.                         　　body，

2.

3.                         　　h1，h2，h3，

4.

5.                         　　p，ul，li，

6.

7.                         　　form{

8.

9.                         　　margin：0；

10.

11.                      　　padding：0；

12.

13.                      　　border：0；

14.

15.                      　　}

16.

　　一些开发者用一种更为有意思的方法：他们将属性按首字母的顺序排列。值得注意的是，这样一种方法可能对某些浏览器会产生问题。不管自己的格式如何，你要确保你已经清晰的定义了这些格式方法。这样，你的同事在阅读你的代码的时候将会感谢你的努力。您还可以参考下面的文章。

　　四、合理的利用缩进

　　为了让你的代码给人感觉更为直观，增强 CSS 文件的可读性，你可以使用一行来定义大纲元素的样式。当指定的选择器里的属性超过三个的时候，这种方式将带来混乱。但是，适度的使用这种方式，你可以很清楚的区分相同类的不同点。

　　 ExampleSourceCode

1.                         　　#main－column{display：inline；float：left；width：300px；}

2.

3.                         　　#main－columnh1{margin－bottom：20px；}

4.

5.                         　　#main－columnp{color：#333；}

6.

　　同时，样式修改的维护也是个比较麻烦的问题。很多人修改样式之后就忘记了，结果后来又发现修改的样式导致了页面出错，不得不苦苦寻找。因此，为修改的样式构建一个特殊的格式就很必要了。一种很简单的方式是，给修改过的样式缩进，同时，也可以使用一些注释（比如 "@new" ）来做一个标识。

　　 ExampleSourceCode

1.                         　　#sidebarullia{

2.

3.                         　　display：block；

4.

5.                         　　background－color：#ccc；

6.

7.                         　　border－bottom：1pxsolid#999；/*@new*/

8.

9.                         　　margin：3px03px0；

10.

11.                      　　padding：3px；/*@new*/

12.

13.                      　　}

14.

　　总的来说，只有建立一个合适的样式指南才会对样式表的可读性有所帮助。记住，移去每一个对你理解文件没有帮助的样式指南，避免对过多的元素使用过多的样式指南。然后，为了一个可读性可维护性良好的 CSS 文件而努力吧。