CSS代码规范#(精选.)

HTML基本格式:

注释：/*header start*/

内容区域

/*header end*/

CSS 书写规范

1、用两个空格代替tab键。

2、不要在自闭合的元素尾部添加斜线。不要省略可选的结束标签。

3、对于属性的定义，确保全部用双引号，不要用单引号。

4、指定HTML的根元素的lang属性。

5、IE通过指定edge mode。通知IE采用其所支持的最新模式。

列：

6、必须声明字符编码，一般采用UTF-8。

7、引入CSS与JS时不指定type属性，因为它们都有默认值。

8、属性顺序：

8.1 class

8.2 Id、name

8.3 data-*

8.4 src、for、type、href

8.5 title、alt

8.6 aria-*、role

9、书写顺序：

9.1 位置属性(position,top,right,z-index,display,float 等)

9.2 大小(width,height,padding,margin)

9.3 文字系列(font,line-height,letter-spacing,color-text-algin 等)

9.4 背景(background,border 等)

9.5 其他(animation,transition等)

10、尽量缩写属性。

11、去掉小数点前的“0”。

12、不建议使用下划线，为了和js区分，IE6中无效而且输入的时候少按shift键。

13、不要随意使用id(应按需要使用,而不能滥用)

14、减少标签数量。

15、尽量避免使用js生成标签。通过js生成的标签让内容变得不易查找,编辑,并且降低性能.

16、对于从逗号分隔的属性值，每个逗号后面都应该插入一个空格（，box_shadow）。

17、不要在rgb( ),rgba( ),hsl( ),hsla( ) 或rect( )值的内容逗号后插入空名(只要逗号,不加空格)。

18、十六进制全部小写（#fff），尽量简写。

19、为选择器中的属性添加双引号（input[type=”text”]）。

20、避免为0值指定单位。如margin:0;

21、不要用@import ，会增加额外的请求次数。应用一下代替：

21.1 使用多个

21.2 通过sass或less将多个css文件编译为一个文件.

21.3 通过Rails,Jekyll或其他系统提供过css文件合并功能.

22、媒体查询应放在尽可能相关规则的附近,不要将他们打包放在一个单一的样式文件中.

23、带前缀的属性,通过缩减方式,让每个属性的值在垂直方向对齐.

列: .div{

-webkit-box-shadow:10px 10px 5px #888;

box-shadow:10px 10px 5px #888;

}

24、对于只包含一条声明语句的样式,建议语句放在同一行.

25、将最近的父class或基本(base)class作为新class的前缀.

26、在文件的结尾添加一个空白行。

27、对为选择器分组时，将单独的选择器单独放在一行。

28、选择器的个数尽量不要超过3个。

29、每一条规则的大括号{前后加空格。

30、如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后，并且属性名称要对齐。

31、命名中尽量使用小写。

32、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。

33、避免class与id重名。

CSS 优先级

1、添加了!important 的属性。

2、Style 属性嵌入。

3、具有一个或多个id选择器。

4、具有一个或多个类，属性或伪类选择器。

5、具有一个或多个元素选择器。

6、通配选择器。

7、优先级由高到低排列的6个位置。

7.1 最高优先级的位置是HTML文档头部的