借助ElementPlus源码剖析如何优雅地运用BEM

前端

2023-12-12 04:26:57

BEM 命名约定：让 CSS 代码井然有序、语义化十足

在纷繁复杂的 CSS 世界中，BEM 命名约定犹如一盏明灯，照亮我们编写高效、语义化代码的道路。本文将深入剖析 BEM，并分享它在 ElementPlus 中的精彩应用，让你轻松驾驭这种强大的命名技巧。

BEM 的构成基石

BEM 的名称源自其三个基本要素：

块（Block） ：独立、可重用的组件，比如按钮或导航栏。
元素（Element） ：块的组成部分，比如按钮的文字内容或导航栏的链接。
修饰符（Modifier） ：用于修改块或元素的外观或行为，比如禁用按钮或高亮导航栏的当前页面。

BEM 命名规则

BEM 的命名规则简单明了：

块名以两个下划线开头，如 __button。
元素名以一个下划线开头，如 __button__text。
修饰符名以两个连字符开头，如 --disabled。

BEM 命名的好处

使用 BEM 命名可以带来诸多好处：

语义化代码 ：清晰的命名反映了 HTML 结构和 CSS 规则，增强了代码可读性和可维护性。
模块化代码 ：块、元素和修饰符形成独立的代码模块，方便复用和修改。
样式优先级明确 ：BEM 命名确保了修饰符的优先级高于元素，元素的优先级高于块，简化了样式覆盖。

ElementPlus 中的 BEM 应用

ElementPlus，一个功能强大的 Vue 组件库，广泛采用了 BEM 命名。让我们以按钮组件为例：

/* 块 */
.__button {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
}

/* 元素 */
.__button__text {
  font-weight: bold;
}

/* 修饰符 */
.__button--disabled {
  color: #999;
  border-color: #ccc;
  background-color: #efefef;
  cursor: not-allowed;
}