CSS BEM 命名规范的实操

73 阅读1分钟

BEM 的命名模式

  • block 代表更高级别的抽象或组件
  • element 是 block 的子部分
  • modifier 用来定义block或者element的属性或状态
.block {}

.block__element {}

.block--modifier {}

.block__element--modifier {}

结合CSS预处理器LESS,SCSS使用BEM

<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary { background: blue; }
        &--success { background: green; }
    }
}

多层嵌套解决方案

如下写法也遵循BEM规范,但会使类名难以阅读,增大HTML和CSS文件的体积,当改动其中某个元素的类名时,也需要改动其子元素类名,造成不必要的麻烦。

<div class=“nav”>
    <ul class=“nav__menu”>
        <li class=“nav__menu__item”>
            <a class=“nav__menu__item__link”>Home</a>
        </li> 
    </ul>
</div>

可以只关注块名称本身并将其用作主要锚点,优化如下:

<div class=“nav”>
    <ul class=“nav__menu”>
        <li class=“nav__item”>
            <a class=“nav__link”>Home</a>
        </li> 
    </ul>
</div>