首页 › CSS › CSS 架构与现代特性 › BEM 命名方法论

BEM 规则

BEM = Block（块） + Element（元素） + Modifier（修饰符）

/* Block：独立组件 */
.card { }

/* Element：块内部的组成部分（双下划线 __） */
.card__title { }
.card__body { }
.card__footer { }

/* Modifier：变体（双连字符 --） */
.card--featured { }
.card__title--large { }

/* 完整 */
.card--featured .card__title--large { }

HTML 结构

<div class="card card--featured">
  <h2 class="card__title card__title--large">推荐</h2>
  <div class="card__body">
    <p>内容</p>
  </div>
  <div class="card__footer">
    <button class="btn btn--primary">查看</button>
  </div>
</div>

BEM 优势

问题	BEM 解决
样式冲突	类名唯一
层级过深	无嵌套（.card__title 而非 .card .title）
可读性	HTML 中一看就知结构和变体

小结

约定	示例
Block	.card
Element	.card__title
Modifier	.card--featured

上一节：计数器与形状 下一节：层叠层级 @layer

贡献者: 布欧-Lewyon