BEM命名规范

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

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

  1. .block {}
  2. .block__element {}
  3. .block--modifier {}
  4. .block__element--modifier {}


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

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

与less或者scss结合

  1. .block {
  2.     &--modifier {
  3.     }
  4.     &__element {
  5.         &--modifier {
  6.         }
  7.     }
  8. }

优势

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

  • 代码更易覆盖

  • 代码更易读