CSS – BEM (Block__ElementModifier)

前言

BEM 是一种 CSS class 命名规范. 目的是防止大家名字取太短, 不小撞名字后果很麻烦.

参考:

Youtube – You Probably Need BEM CSS in Your Life (Tutorial)

Battling BEM CSS: 10 Common Problems And How To Avoid Them

结构

<section class="service-section">
  <h1 class="service-section__title">Service 1</h1>
  <p class="service-section__description">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae,
    omnis.
  </p>
  <button class="service-section__action service-section__action--focused">
    click
  </button>
</section>

Block

block 就是一个 namespace 概念, 算是全局命名了, 要确保与页面里其它 block 不能撞,

Element

element 就是元素的语义命名, 比如 title, description, call to action 对比 h1, p, button

有些人不喜欢拿 semantic HTML 来做 selector 所以就有了更语义化的 element.

要确保在整个 block 里面, element 名字不能撞哦.

Modifier

modifier 通常用来表达状态 state, 比如 focused, hovered, 变种 element 的意思.

Sass 结构

.service-section {
  &__title {
    color: red;
  }
  &__description {
    font-size: 1.5rem;
  }
  &__action {
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.5rem 1rem;

    &--focused {
      background-color: rgba($color: blue, $alpha: 0.3);
    }
  }
}

利用嵌套和 & 语法, 虽然 class name 很长, 但 Sass 并没有重复的代码, 看上去还可以. 

出来的效果

.service-section__title {
  color: red;
}
.service-section__description {
  font-size: 1.5rem;
}
.service-section__action {
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.5rem 1rem;
}
.service-section__action--focused {
  background-color: rgba(0, 0, 255, 0.3);
}

注意, 它并不是 child selector, .service-section .service-section__title 哦, 而是 flat 的.

我个人是觉得是 ok 的, 毕竟都命名规范了嘛, flat 也不会撞. 但如果想让它变成 .service-section .service-section__title 也是很容易的

#{&}__title {
  color: red;
}

加上 Sass 特定语法 #{} 就可以了. 效果:

.service-section .service-section__title {
  color: red;
}

常见问题 FAQ:

问: 如果有很多层, 是不是要写成 block__element1_element2_modifier 还是 block1_block2_element_modifier? 

答: no, BEM 的结构永远都是 block-name__element-name--modifier, block name, element name 可以用 kebab-case 写长长, 防止撞名字.

问: 不喜欢 class 名字长长, HTML 很丑, 用嵌套 + child selector 的方式可以吗? 

答: 是可以的, 关键就是哪个 namespace 的概念要有, 所以 selector 都要有一个 root > child. root 就是 unique 的. 这样就可以保证不会撞了.

我不喜欢 html 写长长的 class. 所以我都是用 child selector 的 (但这样其实风水并没有比较好, 要 100% 顺风水的话还是用 BEM 吧)

替代方案

BEM 的目的是防止 class name 撞名字. 它的解决方式是通过 namespace

我们需要自己管理好 namespace, block 一定要是 unique. 而 block 里面的 element 命名是 block__element 所以防止了和 block 撞名.

有几个方式可以替代这个方案.

1. 用 Tailwind CSS, 因为它的 class 是功能的名字而不是 element 的名字, 自然就不会撞名字了

2. 用 Isolation 方案, 比如 Asp.net Core – CSS Isolation, Angular Component styles

它们的做法就是 compile CSS 和 HTML, 然后加上一些名字. 做法和 BEM 差不多, 只不过是自动的, 不需要人维护.