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>