CSS书写规范

CSS样式命名规则

 常用样式命名方式

 

id和class 

id不要滥用，谨慎使用

适当使用class

空格规范

【强制】 选择器 与 { 之间必须包含空格。

示例： .selector { }

【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

示例：  font-size: 12px;

选择器规范

【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

示例：

 /* good */
 .post,
 .page,
 .comment {
     line-height: 1.5;
 }
 ​
 ​
 /* bad */
 .post, .page, .comment {
     line-height: 1.5;
 }

【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

 /* good */
 #username input {}
 .comment .avatar {}
 ​
 /* bad */
 .page .header .login #username input {}
 .comment div * {}

属性规范

【强制】 属性定义必须另起一行。

示例：

/* good */
 .selector {
     margin: 0;
     padding: 0;
 }
 ​
 /* bad */
 .selector { margin: 0; padding: 0; }　

【强制】 属性定义后必须以分号结尾。

示例：

 /* good */
 .selector {
     margin: 0;
 }
 ​
 /* bad */
 .selector {
     margin: 0
 }