返回
斩断命名烦恼 - BEM国际规范+美团订单模块实战！助你写出通顺代码
前端
2023-02-28 17:28:48
BEM：CSS 中实现可维护性和可重用性的秘密武器
在复杂多变的 UI 世界中，维护和重用代码是一项艰巨的任务。BEM（Block、Element、Modifier）规范横空出世，为我们提供了一种巧妙而实用的方法来解决这一难题。
什么是 BEM 规范？
BEM 规范是一种 CSS 命名约定，将 UI 界面元素分解为三个基本部分：
- Block（块）： 独立的、可重用的组件，例如导航栏或侧边栏。
- Element（元素）： 块的组成部分，例如导航栏中的链接或侧边栏中的菜单。
- Modifier（修饰符）： 用于修改块或元素的外观或行为，例如活动状态或禁用状态。
BEM 规范的应用
使用 BEM 规范分三个步骤：
- 分解 UI 元素： 将界面元素分解为块、元素和修饰符。
- 分配唯一类名： 为每个块、元素和修饰符分配一个唯一的类名，遵循以下格式：
block--element--modifier。 - 设置样式： 在 CSS 文件中使用这些类名来为界面元素设置样式。
BEM 规范的优势
BEM 规范带来了一系列令人印象深刻的优势：
- 提高可读性和可维护性： 清晰的类名结构使代码易于阅读和理解，便于维护和更新。
- 减少重复： 通过为重复使用的元素和修饰符分配唯一类名，可以有效减少代码重复。
- 提高可重用性： BEM 组件可以轻松地在不同页面和项目中重用，从而节省时间和精力。
- 提高团队合作效率： 一致的命名约定促进了团队成员之间的沟通和协作。
美团订单模块 BEM 命名示例
为了理解 BEM 规范的实际应用，让我们考虑美团订单模块：
- Block:
order-module - Element:
order-list、order-detail、payment-method - Modifier:
active、disabled
CSS 样式如下：
.order-module {
width: 100%;
margin: 0 auto;
}
.order-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.order-detail {
background-color: #fff;
padding: 10px;
margin: 10px 0;
}
.payment-method {
display: flex;
align-items: center;
}
.active {
color: #fff;
background-color: #000;
}
.disabled {
color: #ccc;
background-color: #efefef;
}
使用 BEM 规范的注意事项
在使用 BEM 规范时，请注意以下几点：
- 使用字母和连字符： 类名必须以字母开头，并使用连字符连接单词。
- 保持简洁性： 类名应尽可能简洁，但仍能清晰地元素。
- 避免空格和特殊字符： 不要在类名中使用空格或特殊字符。
- 谨慎使用伪类： 避免在类名中使用伪类或伪元素。
结论
BEM 规范是一种变革性的 CSS 命名约定，为维护和重用 UI 代码提供了强大的工具。通过将界面元素分解为更小的组件并分配唯一类名，我们可以实现更加干净、可读、可维护和可重用性的代码。
常见问题解答
-
BEM 规范是否适用于所有 CSS 框架？
是的，BEM 规范与所有 CSS 框架兼容，包括 Bootstrap、Materialize 和 Foundation。 -
BEM 规范是否可以与其他命名约定结合使用？
可以，但建议保持命名约定的一致性以避免混淆。 -
如何处理嵌套元素？
使用element--nested-element这样的嵌套类名结构。 -
BEM 规范是否会导致更长的类名？
是的，但牺牲了一定的简洁性换取了更强的可读性和可维护性。 -
BEM 规范是否会影响 CSS 性能？
不会，BEM 规范不会对 CSS 性能产生重大影响。
