整理的一些前端代码规范系列 -- css规范

一.命名规范(BEM规范)
BEM规范是一种主流的css命名规范，BEM分别对应的是block ， element 和 modifier，为的是结束混乱的命名方式，达到一个语义化的CSS命名方式。

1.1 什么是Block
在BEM规范中，block（块）表示一个组件的意思，假设你要写一个按钮的组件，只需要设置一个 .button 类的按钮，然后可以在任何按钮上使用该类，就可以生成该组件的传统样式。在BEM 中，块被写为和 class 的名字一样，如下所示：

.button {
}

.header {
}
复制代码

BEM 使用 .button 而不是直接使用元素的原因是因为类名具有无限的可复用性。举个例子，如果将 元素的背景颜色设置为红色，则所有 都将被强制继承红色背景。如果你要给你页面上某个按钮设置不同的颜色，你必须通过覆盖你的元素来修复代码，这种方式不仅仅会使你的css代码杂乱无章，并且可能会让各个 元素之互相影响。

/* good */
.button { background-color: red; } 
.button--secondary { background-color: blue; }

/* bad */
button { background-color: red; } 
.parent button { background-color: blue;}
复制代码

如上正确示范代码所示，如果设置了一个 .button 类的按钮，则可以在任何

元素上选择是否使用 .button 类。那么，如果你需要一个不同的背景颜色，你所做的就是改成一个新的 class，比如说 .button–secondary，而这里的–secondary，其实就是下面会讲到的修饰符（modifier）。

1.2 什么是Element
元素是块的子节点，元素表示的是目的，而不是状态。块与元素之间用一个双下划线隔开，所以，如果你看到一个例如.form__row这样的类名 ，你会马上知道 .form 块中有一个 row 元素。

/* good */
.form__row {
  
}

/* bad */
.form .row {
  
}
复制代码

要特别注意的是，对于Element来说，不能脱离Block父级单独使用，如下代码所示：

/* good */

  



/* bad */

  


复制代码

1.3 什么是Modifier
修饰符是改变某个块的外观的标志。要使用修饰符，用一个双短横线线隔开，从上面1.1的示例中可以看到，修改的按钮将被命名为 .button–secondary,–secondary就是一个修饰符，

.header--first {
    
}

.header__button--selected {
    
}
复制代码

同样要特别注意的是，对于Modifier来说，不能脱离Block和Element父级单独使用，如下代码所示：

/* good */

    

        

/* bad */

复制代码

二.属性值
2.1 数值
当数值为 0 - 1 之间的小数时，建议省略整数部分的 0。

/* good */
.panel {
  opacity: .8
}

/* bad */
.panel {
  opacity: 0.8
}
复制代码

2.2 长度
当长度为 0 时建议省略单位。

/* good */
.list {
  padding: 0 5px;
}

/* bad */
.list {
  padding: 0px 5px;
}
复制代码

2.3 颜色
建议不使用命名色值。

/* good */
.button--success {
  color: #90ee90;
}

/* bad */
.button--success {
  color: lightgreen;
5.2 字重
[强制] font-weight 属性必须使用数值方式描述。
复制代码

2.4 清除浮动
建议当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

2.5 !important
除公共样式之外，在业务代码中尽量不能使用 !important

2.6 z-index
建议将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。

三.字体排版
3.1 字号
因为 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。所以在 Windows 平台显示的中文内容，其字号应不小于 12px。

3.2 字重
font-weight 属性建议使用数值方式描述。

/* good */
h1 {
   font-weight: 700;
}

/* bad */
h1 {
   font-weight: bold;
}
复制代码

3.3 行高
line-height 在定义文本段落时，应使用数值。将line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置line-height。如果line-height 用于控制垂直居中，应该设置成与容器高度一致。

/* good */
 .container {
   line-height: 1.5;
 }
 

/* bad */
.container {
   line-height: 15px;
 }
复制代码

四.选择器相关
4.1 不要为 id、class 选择器添加类型选择器
既不太美观之外，同时也会影响性能。

/* good */
#error,.message {
  font-color: #c00;
}

/* bad */
input#error,p.message {
  font-color: #c00;
}
复制代码

如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以加入到我的Q群中:前114中6649后671，里面有许多前端学习资料以及2020大厂面试真题 点赞、评论、转发 即可免费获取，希望能够对你们有所帮助。