转载：http://www.fuzhongkuo.com/?p=568

Css开发规范

BY ADMIN // 2014/08/11 //  NO COMMENTS

一、CSS约定：

1、所有CSS都应该通过外部资源文件加载，因为这样能控制其缓存且能使HTML文件更小；

2、外部CSS文件必须通过link标签引用，link标签必须放置在HTML文档的head中，尽可能的放在前面，但必须在title之后。这样能提升性能，且对SEO没有影响。

3、禁止使用@import导入外部样式表，因为这样导入的文件无法控制缓存，且会阻塞渲染。调试文件是唯一的例外。

4、当某个特定页面需要一小段特定样式时，不应在head中直接编写CSS。这种代码无法缓存，且容易导致代码不一致。

5、所有引入的外部样式表文件必须存在（禁止使用占位符）。文件缺失会导致产生不必要的HTTP请求，从而影响性能，产生404错误，影响SEO。

6、CSS文件应该在放置在网站的CSS目录。CSS中使用的图片应该放置在与CSS同级目录下的images目录中，插入图片放在images下的insert文件下，这样可以保证CSS目录自身完整、随意移动，同时区分图片是引用还是插入。

7、生产环境中（线上）提供的CSS文件必须通过压缩工具（YUL Compressor）进行合并和压缩。调试文件必须用做CSS文件合并的配置列表，这样可以提升性能，同时便于维护。

8、适当的时候应该使用CSS背景图片合并技术。这种技术能有效提升性能，因为能较少HTTP请求，尤其针对网速较慢的设备。（项目开发前期，可以先使用单张，项目稳定后在进行合并）

9、禁止使用CSS表达式，因为只有极少浏览器支持，且性能不佳。

10、禁止使用CSS行为文件（HTC文件），因为只有极少数浏览器支持，且会让CSS产生JavaScript代码依赖。

11、不应使用data URI，因为data URI的数据尺寸比原始文件还要大，且无法进行缓存控制。

 

二、基本规则：

1、应该使用UTF-8字符编码。这样可以避免出现本地化错误。

2、禁止使用内联CSS。这样的样式无法缓存，且会导致代码不一致。

3、禁止使用！important。因为这回影响高级用户使用自定义的用户代理样式，也会影响其他开发者覆盖该CSS声明。

4、不应该使用通用选择器（*），使用该选择器无法达到预期效果，还会破坏继承样式，且对性能有影响。

5、在简单的class或id能满足需求的情况下，应该避免使用复杂的高级选择器或CSS3选择器。复杂选择器对性能有影响。

6、应该尽量使用特殊性低的选择器（如P），根据需要逐步增加特殊性（从右往左，如.aside p）。这样是为了在必要的时候覆盖样式，尽量保持样式简洁。

7、要用到的每个HTML标签，必须至少定义一个简单的CSS元素选择器并为其应用基本的样式；否则，必须所有人都应该知道使用浏览器为该标签定义的默认样式（如表单样式）。这样可以保证跨浏览器一致。

8、不应在零值（0）后面使用单位，此时不要单位。

9、可能的情况下应该多使用简写属性。不过注意简写属性会覆盖各个单独属性。

10、不应修改构建生成的文件（合并压缩的文件）。这会导致混乱，且你的修改会在下次构件时丢失。

11、大板块的class里应该属性ID。

 

三、选择器的优先级（权重）：

1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。

2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。

备注：行内样式，指的是html文档中定义的style

Ps：<h1 style=”color: #fff;”>header</h1>

3、第三级优先的属性是由一个或多个id选择器来定义的。

Ps： #id{margin:0;} 会覆盖 .classname{margin:3px;}。

 4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。 Ps: .classname{margin:3px;} 会覆盖 div{margin:6px;}

 5、第五级由一个或多个 类型选择器定义。

Ps： div{margin:6px;}  覆盖  *{margin:10px;} 。

6、最低一级的选择器是为一个通配选择器。

Ps：*{margin:10px;}这样的类型来定义。

权重算法：

从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.

Ps：body #content .data img:hover，最终的权重值是0122；#content是一个id选择器加了100，.data是一个class类选择器加了10，：hover伪类选择器加了10， body和img是元素加了1。

01. *{}                        ====》0

02. li{}                         ====》1(一个元素)

03. li:first-line{}              ====》2(一个元素，一个伪元素)

04. ul li {}                    ====》2（两个元素）

05. ul ol+li{}                 ====》3（三个元素）

06. h1+ *[rel=up] {}           ====》11（一个属性选择器，一个元素）

07. ul ol li.red{}               ====》13（一个类，三个元素）

08. li.red.level{}               ====》21（两个类，一个元素）

09. style=”"                    ====》1000(一个行内样式)

10. p {}                        ====》1（一个元素）

11. div p {}                    ====》2（两个元素）

12. .sith {}                     ====》10（一个类）

13. div p.sith{}                 ====》12（一个类，两个元素）

14. #sith{}                     ====》100（一个ID选择器）

15. body #darkside .sith p {}    ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)

备注：更多详细参考

http://www.w3cplus.com/css/css-specificity-things-you-should-know.html

四、注释：

1、文件注释和模块注释都应该遵循CSSDOC格式（http://cssdoc.net）。CSSDOC提供了一种标准化的注释方法。一个典型的CSSDOC注释块（DocBlock）由以下几部分组成：

/**

* short description简短描述

*

* long description详细描述

*

* @tags (optional)标签 （可选）

*/

2、一个CSS文件必须在文件头部包含注释，注释包括如下信息：文本标题、简短描述、详细描述（可选）、关联项目、作者、版权信息和颜色信息（可选）。举例如下：

/**

*3.8 theme（多麦3.8活动）

*

*本样式只适用此次3.8活动

*

*@project (项目)  多麦3.8活动

*

*@author(作者) ken

*

*@copyright (版权) http://duomai.com

*/

3、相关模块之前都应该放置模块注释，目的是便于开发者快速浏览和搜索。格式如下：

/**

*文章列表

*

*@section （段）文章列表

五、格式：

1、左大括号应该在最后一个选择器放在同一行，在选择器和左大括号之间应保留一个空格。每个属性/值对应该独占一行，并保持一个tab缩进。右大括号应该独占一行。每一行属性的冒号和属性值之间应该保留一个空格，且使用分好结束。范例如下：

#content {

color: red;

font-size: 1em;

}

2、如果一个规则中使用多个选择器（选择器分组），每个选择器声明应该占一行。如果在重置样式表中使用或选择器比较短则可以例外。

3、浏览器厂商特定属性应该放置在其他所有属性之后，以便在视觉上有明显区分。浏览器厂商特定属性之后必须放置对应的W3C的标准规则。浏览器私有写法在前，标准写法在后。（-moz-box-shadow: 1px 2px 3px #ddd；-webkit-box-shadow: 1px 2px 3px #ddd；box-shadow: 1px 2px 3px #ddd；）

 六、命名：

1、class和id名称必须是小写。class和id名称应该仅包含一个单词，且id是唯一的并是父级的。如果有必要使用多个单词，则单词之间必须使用驼峰式写法分割(因为驼峰式可以减少一个字符)，如sideNav。当驼峰式写法遇到首字母缩写词时，如果首字母缩写词放在开头则应该使用小写（wwwLink），否则的话应该使用大写（linkWWW）。

2、class和id名称必须使用字母、数字或连字符。禁止使用下划线、斜线或反斜线、星号，不能以数字开头。

3、class和id名称要尽可能地语义化，不要太过抽象。比如针对警告信息样式，应该命名为warning，而不是red。应该坚持使用简单好人的命名，比如nav、aside、footer。

4、命名空间与class或id名称中的其他部分之间必须使用连字符分割。如：news-nav，命名空间是news。

 七、文字排版：

1、必须仔细挑选字体栈中的字体。排在第一位的最理想的字体，紧接着是用户可能已安装的字体，紧接着是大多数用户都会安装的字体，最后是系统默认安装的字体。

2、如果想以大写方式显示文本，必须试用text-transform属性将显示转换为大写。这样便于日后对其修改。

3、文字大小应该使用em单位，也可以用%或关键词（如large、small等）。禁止试用像素，因为使用后文字可能无法缩放。

 

八、颜色

1、使用十六进制颜色时，必须试用小写，这样能让gzip压缩的效果更好。

2、可以以小写形式使用这些命名颜色：black、white、red、blue。命名颜色更适应阅读。

3、使用了背景图片的元素必须有一个备用的背景色。这样能保证在背景图片加载过程中页面仍然好用，且避免出现突兀的颜色变化。（png图片除外）

4、在使用RGBA颜色时5，必须在透明颜色之前声明一个备用的十六进制颜色，以保证不支持RGBA的浏览器可以显示颜色。不应在不透明颜色即可满足需求情况下使用RGBA。

5、禁止对文字使用与背景色一样的文字颜色以达到隐藏的效果。这样做会导致搜索引擎对网站搜索结果进行处罚。