BEM规范

BEM规范，即Block（块）Element（元素）Modifier（修饰器)，用来规范css命名

命名约定模式如下：

.block{}
.block__element{}
.block__element--modifier{}

对于块，若多个单词，则用 - 连接，如search-form

具体例子

• 块即模块，如搜索表单search-form，可以看做一个块
• 这个块内的按钮button、输入框input，为元素
• 元素可以有多种状态，如居中按钮，即修饰

<form class="search-form">
    <input class="search-form__input"/>              //元素
    <button class="search-form__button"></button>    //元素
    <button class="search-form__button--primary"></button>    //修饰
</form>

看起来确实规范多了，且可读性强，但有没有发现一个问题，class的命名有点长，如果最外层还有class的话，那命名就更长了，这就又涉及到css嵌套层数的问题。

在编写代码时，应尽量控制css嵌套层级不超过3层，其次，在使用BEM规范时，应根据具体代码变通，可做适当的优化。

css样式顺序

以前都是想到什么，就直接在样式后面添加，很随意，但看起来也很乱。

后来经过同事建议，重新去看了css书写顺序，发现好的样式顺序，不仅看起来清晰，居然还可以提升浏览器渲染DOM的性能

推荐顺序

1. 定位属性：position display float left top right bottom overflow clear z-index
2. 自身属性：width height margin padding border background
3. 文字样式：font-family font-size font-style font-weight font-varient color
4. 文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
5. css3中新增属性：content box-shadow border-radius transform……

当然，也不是非要按照这个顺序来，每个项目应该都有统一的规范，按照规范就行。