BEM 的格式是 .块__元素--修饰符：.card 表示一个可独立复用的块，.card__title 是块内不可单独使用的元素，.card--featured 是块的状态或变体。它牺牲一点类名长度换来明确的层级语义：哪个类属于哪个组件、哪个是修饰变体，一眼可读，多人协作时不需要互相猜测命名前缀和约定。
BEM 是纯命名约定而非工具，不依赖任何预处理器就能直接落地，搭配 Sass 嵌套写起来也不臃肿。它解决的是纯手写 CSS 时代的命名混乱问题；在 CSS Modules、原子化 CSS 普及之后，作用域隔离交给工具保证，BEM 更多出现在传统项目与需要强语义的组件库里。但块、元素、修饰符这套分类思想至今仍深刻影响样式架构。
<style> .card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; } .card__title { font-size: 16px; font-weight: 600; margin: 0 0 8px; } .card--featured { border-color: #4a9eff; background: #f0f7ff; } </style> <div class="card"> <h3 class="card__title">普通卡片标题</h3> </div> <div class="card card--featured"> <h3 class="card__title">带修饰符的推荐卡片</h3> </div>