BEM 命名规范

[ONE-SUNDAY]

BEM 其实是块（block）、元素（element）、修饰符（modifier）的缩写，利用不同的区块，功能以及样式来给元素命名。这三个部分使用 __ 与 -- 连接（这里用两个而不是一个是为了留下用于块儿的命名）。命名约定的模式如下：

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

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

.block {
    @at-root #{&}__element {}
    @at-root #{&}--modifier {}
}

/* 生成的CSS */
.block {}
.block__element {}
.block--modifier {}

参考资料：https://mrzhang123.github.io/2017/04/05/BEM/

[afeiship]

.block {
  &__element {
    color:#30d;
  }
  &--modifier {
    font-size:12px;
  }
}