BEM

BEM命名规范

BEM代表 “块（block）,元素（element）,修饰符（modifier）”,我们常用这三个实体开发组件。

block 代表更高级别的抽象或组件
block__element 代表 block 的后代，用于形成一个完整的 block 的整体
block--modifier 代表 block 的不同状态或不同版本

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

在选择器中，由以下三种符号来表示扩展的关系：

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
.we-button {}
__  双下划线：双下划线用来连接块和块的子元素
.we-modal__content {}
--  双中划线：单下划线用来描述一个块或者块的子元素的一种状态
.we-button--active {}
.we-modal__content--active {}

与less或者scss结合

.block {
    &--modifier {
    }
    &__element {
        &--modifier {
        }
    }
}

优势

• 样式隔离，避免 css 样式污染

• 代码更易覆盖

• 代码更易读