BEM 方法论：块、元素与修饰符
使用 Block__Element--Modifier 模式命名 CSS 类，创建能够自我说明、低特异性且可复用的组件样式。
BEM 方法论：块、元素与修饰符 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
什么是 BEM
BEM（块、元素、修饰符）是一种 CSS 命名约定，可使样式具有可预测性、可复用性并避免冲突。通过在类名中编码组件结构，它消除了特异性争夺和意外的样式冲突。
块——独立组件
块是独立且可复用的组件，例如：card、button、nav。类名就是块名，使用小写字母并以连字符分隔。
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>元素——块的组成部分
元素是块的一部分，脱离块后没有独立含义。请使用双下划线：block__element。
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>修饰符——变体和状态
修饰符用于改变块或元素的外观或行为。请使用双连字符：block--modifier 或 block__element--modifier。
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>BEM CSS 规则
BEM 类具有较低且相等的特异性（每个类只有一个）。这样可以轻松覆盖样式。请勿使用 ID 或嵌套元素选择器，因为它们会不可预测地提高特异性。
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }使用 Sass 编写 BEM
Sass 的 & 父选择器可以减少编写 BEM 所需的代码。编译后的 CSS 与普通 BEM 完全相同。
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}何时创建新块
当组件可以独立存在并在不同上下文中复用时，请创建新块。当某个部分只有在一个特定块内部才有意义时，请创建元素。
BEM 避免嵌套
BEM 不鼓励在 HTML 和 CSS 中进行深层嵌套。元素内部的元素仍然是 block__element，而不是 block__element__subelement。
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM 与 JavaScript
请为行为钩子使用单独的 JS 专用类：添加 js- 前缀。这样可以解耦样式与脚本——重命名 BEM 类不会破坏 JavaScript 行为。
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);混合使用 BEM 块
一个元素可以拥有多个块类，从而根据上下文设置样式，同时不会让这些块相互耦合。
<button class="btn btn--primary form__submit">Submit</button>BEM 的局限性
类名可能会变得很长。对于重视全局样式一致性的大型团队和设计系统，BEM 最为适用。对于使用局部样式的组件框架（React/Vue），BEM 的命名空间优势则不那么重要。
快速检查
在 BEM 中，card__title--truncated 表示什么？
回顾：BEM
块：独立组件。元素（双下划线 __）：块的一部分。修饰符（双连字符 --）：变体或状态。特异性低且相等。避免使用 ID 选择器和深层嵌套。为 JavaScript 钩子使用 js- 前缀。Sass 的 & 可以减少 BEM 所需的代码。非常适合大型团队和设计系统。
常见问题解答
「BEM 方法论：块、元素与修饰符」课时是免费的吗？
是的 — 「BEM 方法论：块、元素与修饰符」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「BEM 方法论：块、元素与修饰符」这节课中我会学到什么？
使用 Block__Element--Modifier 模式命名 CSS 类，创建能够自我说明、低特异性且可复用的组件样式。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「BEM 方法论：块、元素与修饰符」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。