CSS技巧教程:让CSS代码更具有易维护性

如何让你的CSS代码更具有组织性和易维护性，为什么你的样式表总是臃肿和混乱的？有些时候是源于一开始书写时的混乱和草率，有时候也是因为后期的维护和各种HACK的需要，但不管如何，书写出干净、易于管理的CSS很简单，下面是10条改进的方法：
1.井井有条。
和许多其他的事情一样，首先要保持一个良好的组织性，而不是想到ID就写ID，想到CLASS就写CLASS，而要使样式表保持一个连贯的结构，这能让你充分的利用样式的继承。首先定义你最常用的项目，然后是不太常用到的然后是其他，这会使你的CSS属性得到正确的继承，当你需要重新定义一个特殊的风格时会很简单，也会使得你以后对该CSS的修改和编辑更加迅速，因为它遵从简单、可读、有逻辑的结构。
一个良好的CSS结构应该包括以下一些部分：

1. 重置和覆盖（Resets & overrides）
2. 链接和字体（Links & type）
3. 主要布局（Main layout）
4. 次要布局结构
5. 表单元素
6. 杂项

下图展示的就是一个示例：

2.风格名称、创建时间、签名。
让别人知道是谁写的样式表，当他们有问题的时候可以及时的请教，这在制作模板或者主题以及团队合作时非常有用。

1
2
3
4
5
6
7
8
9
10
11
12

/*=========
Daimaren style
Copyright 2010  by Tomieweb@gmail.com
for  - www.daimaren.cn
 
swatch colors
-------------------
ff0000 - red
0000ff - blue
13437a - dark blue
e1e1e1 - light gray
===========*/

swatch colors里记录了此风格用到的一些颜色色值，和它们对应的颜色描述，这么做是方便以后的编辑工作，你不用再打开PS或者其他取色软件在去找颜色，翻到样式顶部拷贝即可。

3.制作一个模板库。
每次当你制作完一个样式表时，你可以去除那些不通用的东西，然后把文件保存为一个CSS模板以备以后之用。
可以保存成多种用途的各个版本：两列布局、博客布局、打印样式、移动设备样式等等。coda有一个很棒的剪辑功能，可以帮你很容易的保存模板。许多其他的编辑器也有类似的功能，即便是简单的文本批处理也可以很好做出一个模板库来。
每次都从头重写每一个代码实在太疯狂，特别是当你使用相同的公约和方法。

4.使用有用的命名约定。
你可能注意到在第一条建议里的示例里，定义了一对ID叫：col-alpha 和 col-beta，为什么不直接叫co

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!