css的代码是否清晰明了是非常重要的，这一部分作主要介绍。
一：css分类方法
公共型样式是最为重要的部分，对于比较小的项目，我们只引入一个css，这个css的样式即公共型样式，一般包括：“标签的重置和设置默认值”（以消除不同浏览器之间的差异）、“统一调用背景图和清除浮动或其他需统一处理的长样式（这样就无需对每个进行分别的处理）”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。后面会具体介绍。
特殊型样式即对某个维护率较高的栏目或者某个与网站整体差异较大的页面独立引入这样一个特殊型样式，方便我们维护。

皮肤型样式即产品需要换肤功能，那么我们就需要将颜色、背景等抽离出来放在这里，方便管理。
css文件我们分为了公共型样式、特殊型样式、皮肤型样式，那么在css文件的内部我们又是怎么分类的呢？（此部分为重点）
重置和默认的css代码。这是为了消除默认样式和浏览器的差异，并设置部分标签的初始样式，以减少后面的重复劳动。你可以根据自己的网站需求设置，也可以使用别人写好的一些初始化代码，比如：雅虎工程师提供的css初始化代码。这一部分代码放在css内部的最上面。
统一处理的css代码。 这里可以统一调用背景图和清除浮动（指通用性较高的布局、模块、原件内的清楚），实际上，雅虎工程师提供的css初始化代码中就有清除浮动的css代码。这一部分代码放在重置和默认的css代码下面。

布局（grid）: 我们将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等。常用！
模块（module）：即语义化的可以重复使用的较大的整体。如导航、登陆、注册、列表、评论、搜索等。常用！
元件（unit）：通常是一个不可再分的较为小巧的个体，被重复用于各种模块中，比如按钮、输入框、loading、图表等。常用！
功能（function）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动。不常用，不可滥用！
皮肤（skin）：对于换肤型网站需要使用，将皮肤型的样式抽离出来，非换肤型网站不可滥用，不常用。
状态:即一些状态类样式。不常用。
对于后面几种内部分类，大家先有个印象即可，后面我会介绍其使用方法。

二、css命名规则
重要：使用类选择器，放弃ID选择器。因为ID在一个页面中的唯一性导致了如果以ID为选择器来写css，就无法重用，而class而优势在于复用性，而且私有度也并不高。因此，我一般情况下会选择在HTML中的ID用于JavaScript，但是在CSS里只用class，一个ID也不用。这样做实际上也是将表现和行为分开，而不是混在一起。
在html文件中写class的方法：使用单个字母+“-”为前缀。比如：对于header部分，我们可以这样写:
1. <div class="g-header"></div>
那么“单个字母”是什么呢? 实际上就是刚刚介绍的css内部分类方法中的布局（grid）的第一个字母，好处是我们在css代码中可以通过首字母清楚地知道其作用是什么，即见名知意。由此可知，对于模块化（module）的部分我们可以这样写：<div></div>。此div即为登陆框这个模块。 对于元件部分，即不可再分的个体，我们可以这样写<imgclass="u-img" src="../images/iam.png"alt="pic">。对于功能（function）部分，我们就可以这么写：<div></div>。对于皮肤（skin）部分，我们可以这么写：<divclass="s-changeSkin">。 其中 g、m、u这三个首字母是我们用的最多的首字母，其他的首字母应该根据情况来使用。注意1：在css中，样式的选择器总是要以上面的 .g- .m- .u- .f- .s-这五类开头，然后再里面使用后代选择器。 注意2：这并不是说所有的className都需要加这些前缀，对于一些不属于这几种的元素，我们完全可以不加前缀，作为后代选择器使用。

那么后代选择器要怎么使用呢? 我们约定不以单个字母+“-”为前缀且长度大于等于2的类选择器为后代选择器。如：.g-date .u-rightArrow{ float: right;} 这个就是不合适的，我们直接写成 .u-rightArrow{ float: right;}即可。 且一个语义化的标签也可以是后代选择器。比如.m-list li{}。 上一句话也就是说不是语义化的标签作为后代选择器是不合适的，如：.m-list div{},这样的写法很有可能造成污染。
除此之外，我们应当注意：在命名时应当尽量简约而不失语义。如下所示：
对于相同语义的不同类命名，我们可以直接加数字或字母区分即可（如.m-list1、.m-list2,都是列表模块，都通加数字即表示不同的列表模块）。
三：css代码格式
1.选择器、属性和值都是用小写。
这一点非常关键：根据xhtml规范，所有的标签属性和值都要使用小写形式，而我们知道xhtml更为标准，所以最好遵循之，这样，选择器必须小写就是十分必要的了。既然这样我们就不能使用驼峰式写法来写类名了，如class="u-leftArrow"实际上就是不规范的了，最好写成class="u-left_arrow"，也可以表达相同的意思。

2.单行写完一个选择器定义。
优点：便于选择器的寻找和阅读，也便于插入新的选择器和编辑，便于模块等的识别。更重要的是可以去除多余空格，使代码紧凑减少换行。试想，如果每一行只有一个属性名和属性值，那么对于一个大项目而言，就很难做到选择器的寻找和阅读了，而使用一行写完一个选择器，那么就有可能缩短为1/6到1/10，这还是非常客观的。
3.最后一个值也要一分号结尾。
实际上，在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。比如，在最后添加一个属性，如果之前没有在末尾添加分号，那么你就要在新添加的属性前添加分号，否则就会出错，比如在我的一篇博文为解决中文字体显示为方框添加JSON数据时就出现过此类问题。
4.省略值为0的单位
优点：可以节省不必要的字节同时也为了方便阅读，我们将0px、0em、0%等都缩写为0.如下所示：
1. .m-box{margin:0 10px; backgrond-position:50% 0;}
5.使用16进制表示颜色值，其中的字母使用大写形式，并尽量缩写。
除非在你需要透明度而使用rgba，否则都是用
#FFFFFF这样的写法，并尽量缩写，如#
FFF。使用大写形式，是因为这样更加具有易读性，且有利于压缩，而缩写为了减少不必要的字节。