什么是 BEM 命名规范
BEM（Block-Element-Modifier）是一种前端命名规范，用于构建可重用、灵活的 Web 组件。它将组件分解成三个基本部分：
- Block（块）：组件的高层次抽象，代表着组件本身。例如：header、menu、button。
- Element（元素）：组件的子部分，一般是组件的一部分而不能独立存在。例如：menu item、button icon、input label。
- Modifier（修饰符）：修改块或元素的外观、状态或行为。例如：button--disabled、menu--vertical、input--error。
BEM 命名规范的主要优点是：
- 可理解性：使用者可以清楚地了解组件的结构和样式。
- 可扩展性：由于命名规范严格，可以轻松地添加、删除或修改样式。
- 可复用性：由于组件是独立的，可以在不同的页面或项目中重复使用它们。
在 SASS 中使用 BEM 命名规范
SASS 是一种 CSS 预处理器，它提供了许多高级功能，例如变量、嵌套、混合和继承等。使用 SASS 可以更轻松地实现 BEM 命名规范。
Block
在 SASS 中，可以使用类似于 CSS 类选择器的方式定义块：
.block {
// 样式
}Element
在 SASS 中，可以使用 & 符号表示父元素，来定义元素：
.block {
&__element {
// 样式
}
}Modifier
在 SASS 中，可以使用类似于 CSS 类选择器的方式定义修饰符：
.block {
// 块的样式
&--modifier {
// 修饰符的样式
}
}嵌套
使用 SASS 可以更轻松地实现 BEM 命名规范。下面是一个示例：
-- -------------------- ---- -------
------ -
-- ----
---------- -
-- -----
----------- -
-- ------
-
-
----------- -
-- ------
---------- -
-- -----
-
-
-总结
BEM 命名规范是一种前端命名规范，用于构建可重用、灵活的 Web 组件。在 SASS 中使用 BEM 命名规范可以更轻松地实现规范，并提高可维护性。在实际使用中，更加应该注重规范的应用，提高开发效率和项目质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649f9c9748841e9894bf79f3