前端规范——CSS

CSS规范

1.命名规则

1. 所以的命名最好都小写。
2. 尽量使用英文命原则。
3. 尽量不缩写，除非一看就明白的单词，如：btn、nav。
4. 命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active）。
5. scss中的变量、函数、混合、placeholder采用驼峰式命名。
6. 减少id命名，id在JS是唯一的，不能多次使用，id的优先级优先与class，所以id应该按需使用，而不能滥用。

2.样式命名

2.1 网页外层重要部分

● [建议]
warp------------用于最外层
header----------用于头部
main------------用于主体内容（中部）
main-left-------用于左侧布局
main-right------用于右侧布局
nav-------------网页菜单导航条
content---------网页中部主体
footer----------用于底部

2.2连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器。

• 输入的时候少按一个shift键。
• 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）。
• 能良好区分JavaScript变量命名（JS变量命名是用“_”）。

3.代码规范

3.1 编码

● [建议] CSS文件使用UTF-8编码。

@charset "utf-8";
/* 下面为样式内容 */    

解释： UTF-8 编码具有更广泛的适应性。

3.2 使用CSS缩写属性

CSS有些属性可以缩写，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

/* 
    CSS有些属性是可以缩写的，比如padding,margin,font等等，
    这样精简代码同时又能提高用户的阅读体验
 */

/* good */
.example {
   
  border-top:0;
  font:100%/1.6 serif;
  padding:0 1em 2em;
}

/* bad */
.example{
   
  border-top-style:none;
  font-family:serif;
  font-size:100%;
  line-height:1.6;
  padding-bottom:2em;
  padding-left:1em;
  padding-right:1em;
  padding-top:0;
}

3.3 样式属性顺序

1. 定位：position z-index left right top bottom clip等。
2. 自身属性：width height min-height max-height min-width max-width等。
3. 文字样式：color font-size letter-spacing, color text-align等。
4. 背景：background background-image background-color等。
5. 文本属性：background background-image background-color background-size等。
6. css3中属性：content、box-shadow、animation、border-radius、transform等。

/* good */ 
.example {
                              
  z-index: -1;                       
  display: inline-block;             
  font-size: 16px;                    
  color: red;                           
  background-color: #eee;             
}                                   
/* bad */
.example {
      
  color: red;
  background-color: #eee;
  display: inline-block;
  z-index: -1;
  font-size: 16px;
}
/* 目的：减少浏览器reflow(回流)，提升浏览器渲染dom的性能。*/

3.4 去掉小数点前的“0”

/* good */
.example{
   
  font-size:.8em;
}

/* bad */
.example{