CSS `BEM` (`Block-Element-Modifier`) 命名约定深度与实践

嘿，大家好！我是老码农，今天咱们来聊聊 CSS 的“BEM”命名约定，这玩意儿听起来像个秘密组织，但实际上，它能帮你把 CSS 代码整理得井井有条，让你的同事和未来的自己都对你感激涕零。准备好开启这场 CSS 命名之旅了吗？Let’s go!

BEM 是什么鬼？（以及为什么要用它）

BEM，全称 Block Element Modifier，简单来说，是一种 CSS 命名规范。它把你的 UI 组件分成三个部分：

• Block（块）： 独立的、可重用的组件，比如一个导航栏、一个按钮、一个搜索框。
• Element（元素）： 块内部的组成部分，依赖于块而存在，比如导航栏里的链接、按钮里的文字、搜索框里的输入框。
• Modifier（修饰符）： 块或元素的变体，用来表示不同的状态或样式，比如禁用状态的按钮、不同尺寸的搜索框。

为什么要用 BEM？原因很简单：

• 可读性高： BEM 命名清晰明了，一看就知道哪个 CSS 类属于哪个组件，以及它的作用是什么。
• 可维护性强： BEM 避免了 CSS 类的全局污染，修改一个组件的样式不会影响到其他组件。
• 可重用性好： BEM 鼓励组件化开发，方便你把组件在不同的项目中复用。
• 团队协作友好： BEM 统一了命名规范，让团队成员更容易理解彼此的代码，减少沟通成本。

BEM 的基本语法

BEM 的命名规则非常简单，用连字符和下划线分隔：

• Block： block-name
• Element： block-name__element-name
• Modifier： block-name--modifier-name 或 block-name__element-name--modifier-name

举个栗子：一个简单的按钮

假设我们要创建一个按钮组件，它包含一个文本标签，并且可以有不同的尺寸（small, large）。

1. Block： button

   .button {
     display: inline-block;
     padding: 10px 20px;
     border: none;
     background-color: #007bff;
     color: white;
     cursor: pointer;
   }

2. Element： button__label

   .button__label {
     font-size: 16px;
     font-weight: bold;
   }

3. Modifier： button--small 和 button--large

   .button--small {
     padding: 5px 10px;
     font-size: 12px;
   }
   
   .button--large {
     padding: 15px 30px;
     font-size: 20px;
   }

HTML 结构：

<button class="button button--large">
  <span class="button__label">点击我</span>
</button>

<button class="button button--small">
  <span class="button__label">小按钮</span>
</button>

看到了吗？每个 CSS 类都清晰地表达了它的作用和所属的组件。

BEM 的进阶用法

BEM 看起来很简单，但实际应用中还是有一些需要注意的地方。

• 命名要语义化： 不要使用过于抽象的命名，尽量用能表达组件功能的词语。比如，不要用 box，而要用 product-card。
• 避免嵌套过深： BEM 鼓励扁平化的结构，尽量避免元素嵌套过深。如果元素嵌套超过两层，可以考虑将其拆分成独立的块。
• Modifier 的使用要克制： 不要滥用 Modifier，只在需要改变组件的样式或行为时才使用。
• 合理使用 Mix： Mix 是 BEM 的一个高级概念，允许你把多个块或元素的样式混合在一起。这在某些情况下可以提高代码的重用性，但也要注意避免过度使用，以免降低代码的可读性。

Mix 的例子：

假设我们有一个 button 块和一个 icon 块，现在想创建一个带有图标的按钮。

.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('icon.png');
  background-size: cover;
}

.button--with-icon {
  display: flex;
  align-items: center; /* 图标垂直居中 */
}

.button--with-icon .icon {
  margin-right: 5px; /* 图标和文字之间留出空隙 */
}

HTML 结构：

<button class="button button--with-icon">
  <span class="icon"></span>
  <span class="button__label">带图标的按钮</span>
</button>

在这个例子中，我们使用了 button--with-icon 这个 Modifier 来表示带有图标的按钮。同时，我们也在 HTML 中添加了 icon 块的类名，这样就可以把 icon 块的样式应用到按钮上。

BEM 的常见问题

• BEM 会不会导致 CSS 类名过长？

  会的。但类名长一点总比代码乱糟糟的好。你可以使用 CSS 预处理器（如 Sass 或 Less）来简化 BEM 命名。

• BEM 适用于所有项目吗？

  不一定。对于小型项目，BEM 可能有点 overkill。但对于大型项目，BEM 可以显著提高代码的可维护性。

• BEM 和 CSS Modules 有什么区别？

  CSS Modules 是一种通过构建工具自动生成唯一的 CSS 类名，从而避免 CSS 类名冲突的方案。BEM 是一种命名规范，旨在提高 CSS 代码的可读性和可维护性。两者可以结合使用。

BEM 的最佳实践

• 保持一致性： 在整个项目中保持 BEM 命名的一致性。
• 使用 CSS 预处理器： CSS 预处理器可以帮助你简化 BEM 命名，提高开发效率。
• 编写清晰的注释： 在 CSS 代码中添加注释，解释每个 CSS 类的作用。
• 进行代码审查： 定期进行代码审查，确保团队成员都遵循 BEM 规范。

BEM 的利与弊

为了更清晰的了解BEM，我们用表格总结一下它的优缺点

优点	缺点
提高代码的可读性、可维护性和可重用性	CSS 类名可能过长
避免 CSS 类名的全局污染	对于小型项目可能有点 overkill
方便团队协作	需要一定的学习成本
鼓励组件化开发	过度使用 Mix 可能会降低代码的可读性

BEM 的工具推荐

• CSS 预处理器（Sass、Less）： 可以简化 BEM 命名，提高开发效率。
• BEM 命名生成器： 可以自动生成 BEM 风格的 CSS 类名。
• CSS 代码审查工具： 可以帮助你检查 CSS 代码是否符合 BEM 规范。

一个更复杂的例子：一个产品卡片

咱们来个更实际的例子，做一个产品卡片组件。

<div class="product-card">
  <img class="product-card__image" src="product.jpg" alt="产品图片">
  <div class="product-card__content">
    <h2 class="product-card__title">产品名称</h2>
    <p class="product-card__description">产品描述</p>
    <div class="product-card__price">
      <span class="product-card__price-value">199.99</span>
      <span class="product-card__price-currency">元</span>
    </div>
    <button class="product-card__button button">加入购物车</button>
  </div>
</div>

对应的 CSS：

.product-card {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  width: 300px;
}

.product-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-card__content {
  padding: 10px;
}

.product-card__title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-card__description {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.product-card__price {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.product-card__price-value {
  font-size: 20px;
  font-weight: bold;
  margin-right: 5px;
}

.product-card__price-currency {
  font-size: 14px;
  color: #999;
}

/* 使用了 Mix，复用了 button 组件的样式 */
.product-card__button {
  display: block;
  width: 100%;
  text-align: center;
}

/* button block 的样式（这里只展示一部分，假设 button 组件已经定义好了） */
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

在这个例子中，product-card 是一个块，product-card__image、product-card__title 等是它的元素。product-card__button 使用了 Mix，复用了 button 块的样式。

总结

BEM 是一种强大的 CSS 命名约定，可以帮助你编写更清晰、更易于维护的代码。虽然学习 BEM 需要一些时间，但它带来的好处是巨大的。希望今天的讲座能让你对 BEM 有更深入的了解。

记住，编码的道路是漫长的，但只要你坚持学习，不断实践，终将成为一位优秀的码农！感谢大家的聆听！下次再见！