前端Code规范之CSS

一、基本语法
1.使用2个空格soft tabs

2.为选择器分组时，将单独的选择器单独放在一行。

3.为了代码的易读性，在每个声明块的左花括号前添加一个空格。

4.声明块的右花括号应当单独成行。

5.每条声明语句的冒号后应该插入一个空格。

6.为了获得更准确的错误报告，每条声明都应该独占一行。

7.所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

8.对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格，如：
box-shadow:1px 1px 1px #ccc, 2px 2px 2px #bbb;

9.不要在 rgb() 、 rgba() 、 hsl() 、 hsla() 或 rect() 值的内部的逗号后面插入空格。

10.对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如.5 代替 0.5 ； -.5px 代替 -0.5px ）。

11.十六进制值应该全部小写，例如#fff，在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff 。

12.为选择器中的属性添加双引号，例如， input[type=”text”] 。 只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。

13.避免为 0 值指定单位，例如用margin: 0; 代替margin: 0px;

二、样式声明及顺序
对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。

1.Positioning float-定位和浮动

2.Box model-盒模型

3.Typographic-排版

4.border background-边框和背景

5.其它

定位：改变文档流，放在首位
盒模型：决定元素的位置和尺寸，放在第二位
排版：设置文本的呈现方式，涉及文字、行高、对齐、颜色等

01 .decoration {
02     /*positioning and float*/
03     position: absolute;
04     left: 0;
05     top: 0;
06     bottom: 0;
07     right: 0;
08     z-index: 200;
09     float: left;
10     ...
11
12     /*box model*/
13     display: inline;
14     margin: 10px;
15     padding: 10px;
16     width：100px;
17     height: 100px;
18     box-shadow: 1px 1px 1px #ccc;
19     ...
20
21     /*Typographic*/
22     line-height: 1.5;
23     font: 12px arial,"simsun";
24     color: #333;
25     font-weight: bold;
26     text-align: center;
27     text-shadow: 1px 1px 1px #ccc;
28     ...
29
30     /*border and background*/
31     border: 1px solid #ccc;
32     background-color: #ccc;
33     ...
34
35     /*other*/
36     overflow: hidden;
37     opacity: .8;
38     filter: alpha(opacity=80);
39     ...
40 }

三、带前缀的属性
当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对其，这样便于多行编辑。在sublime text 中选取多行。

1 -webkit-border-radius: 5px;
2    -moz-border-radius: 5px;
3     -ms-broder-radius: 5px;
4      -o-border-radius: 5px;
5         border-radius: 5px;

 

四、属性声明尽量简写
常用的有margin,padding,border,font,background,border-radius等

五、class属性命名
关于class属性命名如何是好，具体和csser布局时有关，具体如何命名更好，以后补充。class属性中涉及到javascript使用的类建议增加js前缀。

六、关于注释
常用/*…*/
单行注释：

/*box model style
==================================== */

多行注释：
/*==================================
box model style
box model style
==================================== */