CSS 中的 BEM 规范

BEM 规范

BEM 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论。

规范默认有以下的几个约定:

  • - 中划线:仅作为连字符使用
  • -- 双中划线:表示不同状态或不同版本
  • __ 双下划线:双下划线用来连接块和块的子元素
.block {}
.block__element {}
.block--modifier{}

其中

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

优点

通过 BEM 的命名规范,可以让前端代码更容易阅读和理解,更加的语义化,更容易协作,更容易控制,更加健壮和明确,而且更加严密。

下面是一些例子,方面更深入的理解。

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

css 选择器:

//css
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

缺点

  • BEM 的一个槽点是,命名方式长而难看,书写不雅。相比 BEM 格式带来的便利来说,我们应客观看待。
  • 而且,一般来说会使用通过 LESS/SASS 等预处理器语言来编写 CSS,利用其语言特性书写起来要简单很多。

BEM 和预编译结合

.header {
    &__body {
        padding: 20px;
    }
    &__button {
        &--primary {
            background: #329FD9;
        }
        &--default {
            background: none;
        }
    }
}

Reference

相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页