《
提高CSS文件可维护性的五种方法》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302342502013.htm
4.格式化CSS属性
3.定义你的颜色和版式
5.缩进会是你的友人！
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */
总的来说，只有建立一个适合的样式指南才会对样式表的可读性有所帮助。记住，移去每一个对你懂得文件不赞助的样式指南，避免对过多的元素使用过多的样式指南。而后，为了一个可读性可维护性良好的CSS文件而努力吧。
/*------------------------------------------------------------------
# [Color codes]
Tag：方法 维护 文件 提高
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */
}
body,
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding: 0;
}
或者,提搞网站访问速度可做哪些优化，你也可以取舍描写你布局当中使用的颜色。对于一个给定的颜色，你可以将用到该颜色的块列举出来。当然，你也可以挑选按页面元素来罗列颜色。
/*------------------------------------------------------------------
[Color codes]
Background: #ffffff (white)
Content: #1e1e1e (light black)
Header h1: #9caa3b (green)
Header h2: #ee4117 (red)
Footer: #b5cede (dark black)
对于版式有同样的例子。
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Typography]
Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;
/*------------------------------------------------------------------
[Layout]
* body
+ Header / #header
+ Content / #content
- Left column / #leftcolumn
- Right column / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Search / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements .ads
Content header h2
——————————————————————-*/
#rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer
--> [
网站建设之]提高CSS文件可维护性的五种方法
/*------------------------------------------------------------------
[8. RSS / #rss]
*/
#rss { ... }
#rss img { ... }
或者也可以这样：
同时对于大型名目，你也可以加上CSS文件的进级标记或者一些诊断办法，这里不再胪陈。
对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予正文。例如，可以分辨将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来持续工作。
当完成一项前真个工作之后，许多人都会忘记该项目标结构与细节。然而代码并不是立刻就能完整定型，在余下的时光里还有一直的维护工作,提取页面用到的CSS样式之雏形想法，而这些工作兴许不会是你本人实现,提升网站质量教程(6)：国际化。所以，结构精良的代码能很大水平上优化它的可维护性。下面列出五种提高CSS文件可维护性的方式，也就是一种较好的CSS样式指南。
同时，样式修正的保护也是个比拟麻烦的问题。良多人修改样式之后就忘却了，成果后来又发明修改的样式导致了页面犯错，不得不苦苦寻找。因而，为修改的款式构建一个特殊的格局就很必要了。一种很简略的方法是，给修改过的样式缩进，同时，也可以使用一些解释（比方"@new",提升网站质量教程(5)：易用性 (WAI);）来做一个标识。
Notes: decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/
[Master Stylesheet]
Project: Smashing Magazine
Version: 1.1
Last change: 05/02/08 [fixed Float bug, vf]
Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use: Magazine
-------------------------------------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */
2.树立CSS文件索引
CSS 中我们无奈使用常量，但是在编写颜色和版式方面的代码是我们会常常碰到可以使用很屡次的类，在这里可以将之视为CSS的常量。
而对较大的工程，这样显然不会有什么后果。此时，就须要将样式分解到多少个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作重要是导入其余样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不用要的服务器恳求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。
定义这样一个样式检索可以很有效的使其别人阅读学习你的代码变得轻易。在制造大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候便利查阅。
1.分解你的样式
[Table of contents]
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS /
/*------------------------------------------------------------------
一种可以减小CSS无常量定义断定的方法是在CSS文件顶部的注解中下一些定义，也就是定义常量。一种最简单的利用就是创立一个颜色表。这样你就可以疾速的了解整个页面的颜色，从而防止一些重复修改进程中的过错。如果你需要对颜色进行修改，你也可以很快找到它。
另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，假如你需要跳至RSS部分你只要要简单的搜寻 8.RSS。
/*------------------------------------------------------------------
[Table of contents]
1. Body
2. Header / #header
2.1. Navigation / #navbar
3. Content / #content
3.1. Left column / #leftcolumn
3.2. Right column / #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
-------------------------------------------------------------------*/
#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; }
#main-column p { color: #333; }
不论自己的格式如何，你要确保你已经清楚的定义了这些格式办法。这样，你的共事在浏览你的代码的时候将会感激你的尽力。
a (standard): #0040b6 (dark blue)
a (visited): #5999de (light blue)
a (active): #cc0000 (pink)
-------------------------------------------------------------------*/
一些开发者用一种更为有意思的方法：他们将属性按首字母的次序排列。值得留神的是，这样一种方法可能对某些阅读器会发生问题。
当咱们编写代码的时候，应用一些特别的编码风格会对进步CSS代码的可读性有很大辅助。很多人都有各自不同的编码作风。一部门人习惯于将色彩和字体的代码放在前面，另外一局部则更爱好将相似浮动跟定位的更“主要&rdquo,提升网站质量教程(4)：可读性;的属性放在前面。类似的，也能够将页面元素依照它在布局中的构造进行排序：
/*------------------------------------------------------------------
为了可能敏捷的懂得全部CSS文件的结构，在文件开头建破文件索引是一个不错的抉择。一种可行的方法是建立树形的索引：结构上的id 和 class 都可以成为该树的一个分支。如下：
为了让你的代码给人感到更为直观，你可以使用一行来定义纲要元素的样式。当指定的选择器里的属性超过三个的时候，这种方式将带来凌乱。然而，适度的使用这种方式，你可以很明白的辨别雷同类的不同点。
(责任编辑：网站建设)
提高CSS文件可维护性的五种方法相关文章