CSS Academy · 课时

BEM：块、元素、修饰符命名

Q: 「BEM：块、元素、修饰符命名」这节课中我会学到什么？

应用块-元素-修饰符方法论，创建可预测且可复用的类名。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

应用块-元素-修饰符方法论，创建可预测且可复用的类名。

BEM：块、元素、修饰符命名 是 CoddyKit 上的免费 CSS Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 BEM？

BEM（块–元素–修饰符）是一种创建自描述类名称的命名约定。它使 CSS 组件具备可预测性，并能够自我说明。

块

块是一个独立且有明确含义的用户界面组件，可以单独存在。它是组件的根类。

  <div class="card">Card block</div>
  <nav class="nav">Nav block</nav>
  <button class="button">Button block</button>
  <form class="search-form">Search form block</form>

元素

元素是块的子项，在块之外没有意义。元素使用双下划线：.block__element。

  <div class="card">
    <div class="card__image">Image</div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
    </div>
  </div>
  <nav class="nav">
    <div class="nav__item"><a class="nav__link" href="#">Link</a></div>
  </nav>

修饰符

修饰符是块或元素的变体或状态。修饰符使用双连字符：.block--modifier。

  <button class="button button--primary">Primary</button>
  <button class="button button--large">Large</button>
  <div class="card card--featured">Featured Card</div>
  <nav class="nav">
    <div class="nav__item nav__item--active">Active Item</div>
  </nav>

完整的 BEM 示例

使用 BEM 命名的卡片组件：

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button button--primary card__action" href="#">Read More</a>
    </div>
  </div>

BEM CSS 结构

与该 BEM 卡片对应的 CSS：

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button card__action" href="#">Read More</a>
    </div>
  </div>

BEM 的特异性优势

BEM 类都是单一类选择器（特异性为 0,1,0）。没有哪个选择器比另一个更具体，因此覆盖起来很简单，只需添加正确的修饰符类即可。

常见的 BEM 错误

请避免以下 BEM 陷阱：

多层元素：.card__body__title — 将其扁平化为 .card__title
在 HTML 中将元素放在所属块之外
使用 .nav__link a 这样的元素选择器 — 这会增加不必要的特异性

BEM 与 CSS 自定义属性

BEM 与 CSS 变量天然适配。请定义块级令牌，并让修饰符覆盖这些令牌：

  <button class="button">Default</button>
  <button class="button button--danger">Danger</button>

何时不应使用 BEM

BEM 比较冗长，不适合工具类或一次性样式。Tailwind 等工具优先框架完全取代了 BEM。对于语义化命名很重要的自定义组件库，请使用 BEM。

实际使用 BEM

许多设计系统都使用 BEM 的变体或类似的命名方案。具体语法不如一致的原则重要：块 → 元素 → 修饰符，不进行深层嵌套，并保持特异性扁平。

快速检查

在 BEM 中，哪种语法表示“卡片”块中名为“标题”的元素？

总结

BEM 使用块、元素和修饰符命名：.block__element--modifier。所有类都是单一类，以保持特异性扁平且相等。元素（__）属于其块。修饰符（--）用于创建变体。请避免使用 .card__body__title 这样的深层嵌套，将其扁平化为 .card__title。

常见问题解答

「BEM：块、元素、修饰符命名」课时是免费的吗？

是的 — 「BEM：块、元素、修饰符命名」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「BEM：块、元素、修饰符命名」这节课中我会学到什么？

应用块-元素-修饰符方法论，创建可预测且可复用的类名。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「BEM：块、元素、修饰符命名」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy