CSS规范
书写顺序
-
位置属性(position, top, right, z-index, display, float等)
-
大小(width, height, padding, margin)
-
文字系列(font, line-height, letter-spacing, color- text-align等)
-
背景(background, border等)
-
其他(CSS3)(animation, transition等)
书写顺序举例如下:
.example-class {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 40px;
padding: 10px;
font-size: 16px;
color: #fff;
background-color: #000;
border: 1px solid #f00;
transition: 0.2s all;
}
代码格式化
统一使用展开格式(Expanded)书写样式
/* 紧凑格式,不推荐 */
.test{ display: block;width: 50px;}
/* 展开格式,推荐 */
.test {
display: block;
width: 50px;
}
基础语法规范
-
命名一般为小写英文字母。
/* 不推荐 */ .TEST { width: 100px; } /* 推荐 */ .test { width: 100px; }
-
为了代码的易读性,在每个声明块的左花括号前添加一个空格。
-
每条声明语句的
:
后应该插入一个空格。 -
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
/* 不推荐 */ .test { width: 100px; height: 100px } /* 推荐 */ .test { width: 100px; height: 100px; }
-
对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,
.5
代替0.5
;-.5px
代替-0.5px
)。 -
十六进制值应该全部小写,例如,
#ffffff
。 -
尽量使用简写形式的十六进制值,例如,用
#fff
代替#ffffff
。 -
避免为 0 值指定单位,例如,用
margin: 0;
代替margin: 0px;
。 -
选择器
- 尽量少用通用选择器 *
- 不使用 ID 选择器
- 不使用无具体语义定义的标签选择器
-
统一使用两个空格进行代码缩进
-
为单个 css 选择器或新申明开启新行
/* 不推荐 */ .jdc,jdc-logo,.jdc-hd { color: #ff0; }.nav{ color: #fff; } /* 推荐 */ .jdc, .jdc-logo, .jdc-hd { color: #ff0; } .nav{ color: #fff; }
-
css 属性值需要用到引号时,统一使用单引号
-
类名使用小写字母,以中划线分隔
-
id 采用驼峰式命名
-
尽量使用缩写属性
/* 不推荐 */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; /* 推荐 */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;