一、BEM 命名规范定义

block-name__element-name--modifier-name，也就是模块名 + 元素名 + 修饰器名

eg:

• .el-scrollbar__wrap--hidden-default
• page-post__post-item--even

修饰器推荐用法

BEM修饰器代表着元素的状态，但有时候元素的状态需要js来控制，此时遵循规范没有任何好处，比如激活状态，BEM推荐的写法是：

.block__element { display: none; } .block__element--active { display: block; } 

当用js为该元素添加状态时，我们需要知道该元素的名字block__element，这样我们才能推导出它的激活状态为block__element--active，这是不合理的，因为很多时候我们无法得知元素的名称，所以这时候，我们应该统一js控制状态的类名格式，比如is-active、js-active等等，这些类名只用作标识，不予许有默认的公共样式：

.block__element { display: none; } .block__element.is-active { display: block; } 

注意事项

• BEM的命名中只包含三个部分（不能出现多个元素名的情况）
• BEM不考虑结构（无论父元素名发生改变，或是模块构造发生的改变，还是元素之间层级关系互相变动，这些都不会影响元素的名字）
• BEM禁止使用子代选择器 (层次关系过长，逻辑不清晰)