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

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

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

.button {
}

.header {
}
复制代码

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

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

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

如上正确示范代码所示，如果设置了一个 .b