css BEM书写规范

4,866 阅读5分钟

[规范]css BEM书写规范

BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。 BEM由Block、Element、Modifier组成。 选择器里用以下连接符扩展他们的关系:

  • `__:双下划线用来连接块和块的子元素
  • `- :仅作为连字符使用,连接块或元素或修饰符的多个单词(也可以直接写成驼峰式)
  • --:双中划线用来连接块或元素的状态(也可使用‘_’单下划线表示,本文以'--'方式介绍)

示例: block-name_modifier-name block-name__element-name--modifier-name block-name_modifier-name--modifier-value block-name__element-name--modifier-name--modifier-value 代码里能出现的样式组合只能是B B__E B--M B__E--M B__E--M--M,

基本概念

Block(块)

代码片段可能被复用且这段代码不依赖其他组件即可用Block。块可以互相嵌套,可以嵌套任意多层。

特点:

  1. 块的名称用于描述它的目的。如 menu、button(而不是它的状态,如:red、big)
  2. 块不能影响所在环境。这意味着不能为块设置margin或position
  3. 只能使用class命名选择器,而不能使用标签或id选择器
  4. 不依赖于页面内其他块或元素

Element(元素)

Element是Block的一部分,没有独立存在的意义。任何一个Element语义上是和Block绑定的。

特点:

  1. 与块使用'__'连接。 如: block__item
  2. 用于描述它的目的。如:item、text
  3. 元素可以彼此嵌套,可以嵌套任意多层
  4. 元素总是属于块的一部分。所以类似于block__item1__item2的命名是不合法的

Modifier(修饰符)

定义Block或Element的外观、状态、或行为的标记。

特点:

  1. 与块或元素连接符为'--'
  2. Modifier描述的是它的外观(如”什么尺寸“或”什么主题“等,如size_s或theme——islands),状态(”它与其他的哪里不同“,如disabled,focused等)以及它的行为(”它有怎么样的行为“或”它是怎么对用户响应“,如directions_left-top)

Modifiers分类

Modifiers可以看成是2种类型,key:true;key:value;即某个状态,或某个状态是什么值。

Boolean:

  1. 只有当Modifiers的存在与否很重要时使用,这里它的值默认是true。例如,disabled、active、clickable。
  2. 这种类型下样式的结构是:
    • block-name--modifier-name
    • block-name__element-name--modifier-name

例如:

<form class="search-form search-form--focused">
    <input class="search-form__input">
    <!-- The `button` element has the `disabled` Boolean modifier -->
    <button class="search-form__button search-formbutton__button--disabled">Search</button>
</form>

key-value:

  1. 当Modifiers的value才能描述完整一个状态时,需要使用key-value.例如: ”一个以islands为主题的菜单“,menu--theme--islands。
  2. 这种类型下样式的结构是:
    • block-name_modifier-name--modifier-value
    • block-name__element-name--modifier-name--modifier-value 例如:
<!-- The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form--theme--islands">
    <input class="search-form__input">
    <!-- The `button` element has the `size` modifier with the value `m` -->
    <button class="search-form__button search-form__button--size--m">Search</button>
</form>
</form>

Mix

一种在一个DOM节点上使用不同BEM的方法。 Mixes能够做到:

  1. 组合不同实体的行为和样式,而不需要复制代码
  2. 基于现有的组件组合创造出新的组件 例如:
<!-- `header` block -->
<div class="header">
    <!--
        The `search-form` block is mixed with the `search-form` element
        from the `header` block
    -->
    <div class="search-form header__search-form"></div>
</div>

通过在search-form Block本身是不能设置position或margin,放在header里后,可以作为header的元素,我们在header__search-form上可以设置它的位置信息。所以写组件的时候,可以为组件预留一个className props。

应用

相对另外的Blocks定位Block

最好的方式是混合使用block和element。解决block上不能设置margin、position。 例:

<body class="page">
    <!-- header and navigation-->
    <header class="header page__header">...</header>

    <!-- footer -->
    <footer class="footer page__footer">...</footer>
</body>
.page__header {
    padding: 20px;
}

.page__footer {
    padding: 50px;
}

Block内定位Elements

通过额外创建Block的子Element来定位嵌套。 例:

<body class="page">
    <div class="page__inner">
      <!-- header and navigation-->
      <header class="header">...</header>

      <!-- footer -->
      <footer class="footer">...</footer>
    </div>
</body>
.page__inner {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
}

关于命名

选择器的命名必须完整且精确地描述它代表的BEM实体。 例:

.button {}
.button__icon {}
.button__text {}
.button--theme--islands {}

我们可直接指导我们在处理一个块元素。在html使用如:

<button class="button button_theme_islands">
    <span class="button__icon"></span>

    <span class="button__text">...</span>
</button>

而下面的css就很难让我们做出相同的判断:

.button {}
.icon {}
.text {}
.theme--islands {}

一些问题

  1. 最小化选择器的嵌套(建议不超过2级)。嵌套的场景可以出现在有modifier时,Block或Element需要修改样式
  2. BEM本身是可以写成B__E__E的格式,但如果出现这种嵌套很深的情况,说明组件化设计有问题,所以代码开发中,要求不能写这种格式代码
  3. 不要使用id选择器或tag选择器
  4. 不要在Block中设置position、margin等位置布局相关设置。把可能发生变化的css属性放到Modifiers上
  5. 从使用角度,小图标使用icon-做前缀,不需使用BEM
  6. 命名空间问题。目前我们要求页面以page-作为Block,组件以组名名作为Block。css-guidelines中提出类似BEM命名的方式,以一些前缀作为标识。

注意: 1、BEM中的命名嵌套和DOM不是严格绑定的,命名上不要使用B__E__E,但是写DOM时和样式没有关系。B__E下的DOM里仍然可以有B__E样式的DOM.命名规范是用于识别顶层块组件之间的关系。 例如:

<div class="menu">
  <div class="menu__header">
    <h2 class="menu__title">Title text here</h2>
  </div>
  <div class="menu__body">
    <img class="menu__img" src="img.png" alt="description" />
    <p class="menu__text">text</p>
    <p class="menu__text">
      <a href="test.html" class="menu__link">link</a>
    </p>
  </div>
</div>

参考: en.bem.info