在前端开发过程中，CSS 的样式开发一直是一个棘手的问题。为了让样式更加可维护和可重用，我们需要使用一种自然易懂的命名规范来编写 CSS 样式。BEM（Block Element Modifier）命名规范就是一种能够帮助我们解决 CSS 样式开发困难问题的规范。在本文中，我们将学习如何在 SASS 中使用 BEM 命名规范进行样式开发，并提供示例代码和指导意义。
什么是 BEM 命名规范
BEM 命名规范是一个用于前端 Web 开发的命名规范。它的主要思想是将复杂的 Web 页面分解成多个独立的模块单元，并给它们分配一个明确的名字。BEM 命名规范将每个模块分为三个部分：块、元素和修饰符。
块（Block）：块是页面中比较大的元素，它可以是一个组件，也可以是一个功能模块。通过给块添加一个唯一的类名，可以让块在样式表中更容易进行定义和重用。
元素（Element）：元素是块中比较小的部分。元素存在于块的上下文中，并且只有块的内部才需要使用元素。元素的类名应该以块的类名为前缀，用两个下划线 __ 连接。
修饰符（Modifier）：修饰符是用来改变块或元素的外观或行为的。修饰符的类名应该以块或元素的类名为前缀，用一个连字符 - 连接，然后紧跟修饰符的名称。
如何在 SASS 中使用 BEM 命名规范
在 SASS 中使用 BEM 命名规范可以帮助我们更轻松地组织代码和维护样式。在下面的示例中，我们将以一个简单的按钮组件为例，展示如何使用 BEM 命名规范进行样式开发。
首先，我们需要定义按钮块的基本样式。这个按钮块的类名为 .btn，其中包含了基本的按钮样式属性。
-- -------------------- ---- ------- ---- - -------- ------------- -------- --- ----- -------------- ---- ---------- ----- ------------ ----- ----------- ------- ------ ----- ----------------- -------- ---------------- ----- ------- -------- -
接下来，我们需要定义按钮块内部的元素。在这里，我们需要定义按钮块的文字，以及按钮块中的图标。元素的类名应该以块的类名为前缀，并在类名之间使用两个下划线 __ 分隔。
-- -------------------- ---- ------- ---------- - -------- ------------- --------------- ------- - ---------- - -------- ------------- --------------- ------- ------------- ---- -
最后，我们需要为按钮块添加修饰符。在这里，我们需要添加 disabled 修饰符，当按钮不可用时，按钮的背景颜色和文本颜色会发生变化。修饰符的类名应该以块或元素的类名为前缀，并在类名之间使用一个连字符 - 进行分隔。
.btn--disabled,
.btn__text--disabled,
.btn__icon--disabled {
color: #999999;
background-color: #eeeeee;
cursor: not-allowed;
}现在，我们已经成功地在 SASS 中使用 BEM 命名规范进行了样式开发。通过使用 BEM 命名规范，我们可以更好地管理 CSS 样式，使代码更易于阅读，重用和维护。
总结
在本文中，我们介绍了 BEM 命名规范的基本概念和如何在 SASS 中使用 BEM 命名规范进行样式开发。我们还提供了一个简单的示例代码，以演示如何使用 BEM 命名规范来组织和维护 CSS 样式。通过使用 BEM 命名规范，我们可以更好地管理 CSS 样式，并使代码更易于阅读，重用和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465e691968c7c53b069041d