css模块化-BEM

[xiaokeqi]

B(block)E(element)M(modifier) ，即块__元素--修饰符，element-ui即是采用了这样的写法 其命名规则如下：

• 名称均以小写字母书写
• 名称中的单词用连字符（-）书写
• 元素由双下划线__分割
• 修饰符由双中划线--分割

.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。
.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。
.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。

BEM不是一个框架，它只是一种思想

优点：BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。 缺点： CSS 类名会比较长而且复杂。乍看之下，根据 BEM 命名规则产生的 CSS 类名都会很复杂，但实际上在熟悉了命名规则之后，可以很容易理解其含义。

其实际用法，参照element-ui实现方式，element-ui采用了BEM思想。通过使用sass中

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

来简化BEM书写方式 但我们知道BEM提倡只使用一个类别选择器，避免嵌套带来的属性级联问题。然而Element-UI中并未严格采用这样的思想。其部分组建内部依然使用了级联

 &.el-checkbox--mini {
      padding: $--checkbox-bordered-mini-padding;
      border-radius: $--button-mini-border-radius;
      height: $--checkbox-bordered-mini-height;

      .el-checkbox__label {
        line-height: 12px;
        font-size: $--button-mini-font-size;
      }

      .el-checkbox__inner {
        height: $--checkbox-bordered-mini-input-height;
        width: $--checkbox-bordered-mini-input-width;
        &::after {
          height: 6px;
          width: 2px;
        }
      }
    }

这样的代码形式依出现了