从支付宝Tabbar看BEM，模块化之道的实践

模块化开发的利器：深入剖析 BEM 实践

模块化开发的魅力

在前端开发领域，模块化开发已成为不可或缺的一环。它不仅让代码更易于维护，还增强了组件的独立性和代码的健壮性。而 BEM（Block Element Modifier）作为一种广泛应用的模块化命名规范，为我们提供了实现模块化的绝佳方式。

BEM 的命名规则

BEM 采用三要素构建命名体系：

• Block（块）： 一个独立、可复用的组件，例如导航栏。
• Element（元素）： Block 的一部分，通常指 Block 内的功能性元素，例如导航栏中的菜单项。
• Modifier（修饰符）： 用于标记 Block 或 Element 的特定状态或变体，例如导航栏的展开状态。

命名规范：

• Block 以大写字母开头，其余为小写，例如 Navbar。
• Element 以双下划线作为前缀，例如 __menu-item。
• Modifier 以双横线作为前缀，例如 --open。

BEM 在实践中的应用

为了更好地理解 BEM 的实际应用，让我们以支付宝的 Tabbar 组件为例。

<div class="Tabbar">
  <a class="Tabbar__item" href="/">
    <i class="Tabbar__icon"></i>
    <span class="Tabbar__text">首页</span>
  </a>
  <a class="Tabbar__item" href="/about">
    <i class="Tabbar__icon"></i>
    <span class="Tabbar__text">关于</span>
  </a>
</div>

将其转化为 BEM 命名规范：

<div class="Tabbar">
  <a class="Tabbar__item Tabbar__item--active" href="/">
    <i class="Tabbar__icon"></i>
    <span class="Tabbar__text">首页</span>
  </a>
  <a class="Tabbar__item" href="/about">
    <i class="Tabbar__icon"></i>
    <span class="Tabbar__text">关于</span>
  </a>
</div>

通过 BEM 规范的命名方式，不仅能清晰地标识组件及其构成元素，更重要的是提高了 CSS 的针对性。

CSS 选择器

使用 BEM 规范后，CSS 选择器可以更加精准高效地定位元素：

• 选中 Tabbar：.Tabbar
• 选中 Tabbar 内的所有元素：.Tabbar *
• 选中 Tabbar 中的第一个元素：.Tabbar > :nth-child(1)
• 选中 Tabbar 中激活状态的元素：.Tabbar__item--active
• 选中 Tabbar 中图标元素：.Tabbar__icon

独立性和可维护性

BEM 规范通过对组件和元素进行清晰的命名和组织，显著提升了代码的独立性和可维护性：

• 独立性： 各个组件之间相互解耦，修改一个组件不会影响其他组件。
• 可维护性： 代码结构清晰易懂，修改或调试时能快速定位到目标元素。

总结

通过支付宝 Tabbar 的案例，我们深入了解了 BEM 规范在模块化开发中的应用。BEM 的清晰命名体系、精准的 CSS 选择器以及提升的独立性，使它成为模块化开发的不二选择。

在实践中，熟练运用 BEM 规范，能显著提升前端代码的质量和可维护性，为项目的长远发展奠定坚实的基础。

常见问题解答

• Q：什么是模块化开发？

  • A： 将应用程序拆分为可重用、独立的模块，提高代码的可维护性和独立性。

• Q：BEM 规范有哪些好处？

  • A： 清晰的命名体系、精准的 CSS 选择器、提升的代码独立性和可维护性。

• Q：BEM 规范如何应用于 CSS？

  • A： 通过使用修饰符来标记组件或元素的特定状态或变体，提高 CSS 选择器的针对性。

• Q：如何命名 BEM 组件？

  • A： Block 以大写字母开头，其余为小写，Element 以双下划线作为前缀，Modifier 以双横线作为前缀。

• Q：BEM 规范对代码质量有何影响？

  • A： 通过清晰的命名和组织结构，显著提升代码的可维护性和独立性。