4、网站CSS样式库
这里的样式是根据当前实际的项目内容指定的。例如，文字链接颜色是什么，文字链接经过的样式是什么；一些常用的背景色样式，常用的边框样式等，以及一些高宽等。按照我的经验，网站CSS样式库又可以架构为以下几部分：
①网站常见颜色，尤其是链接色
②网站常见背景色（我习惯用bg+颜色前2字母表示，例如.bgf7表示background:#f7f7f7;）
③网站常见边框色，这里类似于CSS 通用库中的margin属性，需拆分，例如.bbdd表示border-bottom:1px solid #ddd;每人的命名习惯不一样，但是尽量简单为好，甚至您可以像Google一样，直接两个字母（大小写混搭）表示。另外，一定要告知设计师，边框取色 不宜多，不能凭感觉，要有所牺牲，也就是如果之前使用了#cecece的边框色，后面的即使使用#d0d0d0更好看，请使用#cecece代替，这就是 团队协作。
④网站遗留的单margin属性，例如，某一div留白较大，有个单独的margin-top:35px的属性，ok，这个属性请放在网站CSS样式库中，以.mt35{margin-top:35px;}保留，以供之后类似布局或需要的地方使用。
⑤网站遗留的单padding属性，例如，双栏自适应布局时，无论是浮动自适应，还是绝对定位自适应，都需要使用padding-left值，此时的 padding-left多单样式，可抽取出来，以网站样式库的形式存在。记住，是单属性，且不可从通用元素中抽取单独的padding值，否则是给自己 挖火坑。
⑥网站遗留的width属性，在流体布局思想下，宽度是有限的，是珍贵的，需好好利用。
⑦网站常用的一些height属性，指一些高度值，例如height:18px; height:20px; height:24px; height:50px; height:100px; height:200px;等。

记住一个原则：网站通用的元素（按钮，导航，选项卡的）的样式千万不能分离作为网站的CSS样式库。

本文原地址：?p=944，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。

本文作者：张鑫旭，欢迎访问我的个人网站。

5、网站通用小图标样式集
小图标的样式合并是普遍处理的较好的，由于其规律可循，所以经常在CSS文件较上的位置看到有关小图标的CSS合并样式，这在SNS网站中很是常见。一般 合并样式部分样式为{background:url(xx.png) no-repeat;}，分离部分的样式是{background-position:x, y;}，就实现而言，我觉得没有多少说头，只是命名有些自己的见解。在小图标样式命名的时候，我的建议是不要关联图片的内容，比如说一个相册的下图标，不 应该使用iAlbum这样的命名。原因有三：
1. 思考图片的命名杀死n多脑细胞
2. 命名较长，占用字节数，也就是CSS文件大小
3. 也是最重要的，后期的维护。设想下，如果日后相册的图标不再被使用了，原来相册图标的位置可以被其他小图标（如RSS小图标）替换吗？理论上可以，实际 上，我们除了必要的html替换，还需要重新修改图标样式的命名，即iAlbum→iRss的命名，而往往取而代之的做法是直接在后面添加新的图标。

我目前的做法是使用一个不常用的标签作为网站的小图标专用标签，例如s标签，或是u标签，我习惯将小图标单独为一个小图标Sprite，每个图标放 在20*20像素的格子中。在这种情况下，我都是使用矩阵命名法。命名只关联位置，例如，我使用u标签作为整个网站的小图标专用标签，则按照图标的位置 （假设一行20个图标），我会依次命名为：u00,u01,u02…u019,u10,u11,…u119…。这种命名的好处是不用关心到底哪个位置是那 个图标，不用担心命名冲突，在小图标位置以及内容更换的情况下也无需重命名。

例如，上图中标注的u113的意思其实是u(1,13)，这种小图标命名的方法我称之为“小图标矩阵命名法”。此命名略有不足在于在使用小图标时需要打开源文件或通过注释准确查询到对应的class。

6-10、网站通用样式
这里的“网站通用样式”可以说与“网站通用样式库”最为对立的两部分。网站通用样式专指“独立元素”的通用样式，所谓“独立元素”指的是网站通用的导航， 菜单，按钮，选项卡，文本框装饰，图片装饰，圆角处理等等。这些“独立元素”的样式千万不能对其进行分离并归入“网站通用样式库”中，否则，日后会给你留 下无尽的痛苦的！

我几乎从不对按钮或是导航进行定宽，都是宽度自适应，这样，可以大大节约Sprite背景图片以及CSS代码的成本。以前多有探讨，这里不多说了。