全面总结CSS代码的编写规范及优化建议

2020-04-30 14:43:39易采站长站整理

选择器分组时,保持独立的选择器占用一行;
声明块的左括号 { 前添加一个空格;
声明块的右括号 } 应单独成行;
声明语句中的 : 后应添加一个空格;
声明语句应以分号 ; 结尾;
一般以逗号分隔的属性值,每个逗号后应添加一个空格;
rgb()、rgba()、hsl()、hsla()或 rect()括号内的值,逗号分隔,但逗号后不添加一个空格;
对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px);
十六进制值应该全部小写和尽量简写,例如,#fff 代替 #ffffff;
避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;;

CSS Code复制内容到剪贴板

/*  Not recommended  */  
.selector, .selector-secondary, .selector[type=text] {   
  padding:15px;   
  margin:0px 0px 15px;   
  background-color:rgba(0, 0, 0, 0.5);   
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF  
}   
  
/* Recommended */  
.selector,   
.selector-secondary,   
.selector[type="text"] {   
  padding: 15px;   
  margin-bottom: 15px;   
  background-color: rgba(0,0,0,.5);   
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;   
}  

声明顺序

相关属性应为一组,推荐的样式编写顺序

Positioning
Box model
Typographic
Visual
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型决定了组件的尺寸和位置,因此排在第二位。

其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

CSS Code复制内容到剪贴板

.declaration-order {   
  /* Positioning */  
  position: absolute;   
  top: 0;   
  rightright: 0;   
  bottombottom: 0;   
  left: 0;   
  z-index: 100;   
  
  /* Box model */  
  display: block;   
  box-sizing: border-box;   
  width: 100px;   
  height: 100px;   
  padding: 10px;   
  border: 1px solid #e5e5e5;