BEM（Block Element Modifier）是一种前端命名约定，它可以使你的 CSS 代码更具可读性和可维护性。通过将 DOM 元素拆分为块（Block）、元素（Element）和修饰符（Modifier），我们可以更轻松地编写 CSS，并避免出现样式重复或混乱。在 Sass 中使用 BEM 命名法，可以进一步提高代码的效率。
什么是 BEM 命名法
BEM 是一种前端开发者之间通用的约定，它采用块（Block）、元素（Element）和修饰符（Modifier）三种类别来创建可复用的模块化代码。每个模块都以一个块为基础，块内可以包含多个元素，而修饰符则为元素或块提供额外的样式。
块（Block）
块即为页面上独立的组件或模块。它可以是一个头部（header）、一个菜单 (menu) 或者一组按钮（buttons）。
以 HTML 代码为例：
<div class="nav"> <a href="#" class="nav__link">Home</a> <a href="#" class="nav__link--active">Blog</a> <a href="#" class="nav__link">About</a> </div>
在这个简单的导航条中，块的类名为 nav，它是一个独立的模块。在 Sass 中，我们可以使用 .nav 来定义该模块的样式。
元素（Element）
元素指的是块内的部分，它们不具备独立的含义，只是作为块的一部分存在。每个元素都属于一个块，并且有一个类名的前缀，即为块的名字。
在上面的例子中，nav__link 是块 nav 的一个元素，它是导航条中的一个链接。在 Sass 中，我们可以使用 .nav__link 来定义该元素的样式。
修饰符（Modifier）
修饰符为块或元素添加样式变化，以表示它们不同的状态，比如大小、颜色、主题等。修饰符用于扩展和改变块或元素的默认样式。
在上面的例子中，nav__link--active 是修饰符，它表示当前被激活的导航链接。在 Sass 中，我们可以使用 .nav__link--active 来定义该修饰符的样式。
在 Sass 中使用 BEM 命名法，可以更方便地管理块、元素和修饰符之间的关系。下面是一些使用 Sass 和 BEM 的最佳实践。
1. 命名规则
在 Sass 中使用 BEM 命名法，应符合以下规则：
- 使用小写字母、数字和连字符 (-)；
- 使用双下划线 (__) 来分隔块和元素；
- 使用双连字符 (--) 来表示修饰符；
- 使用单一类名，不要使用 ID 选择器或标签选择器。
例如：
-- -------------------- ---- -------
---- -
------- -
------ -----
--------- -
------------ -----
------ ----
-
-
-在这个例子中，我们使用了 .nav 来表示块，.nav__link 表示元素，.nav__link--active 表示修饰符。
2. 继承
BEM 命名法可以使用 Sass 的继承功能，因为它可以让我们避免在代码中重复写样式。
例如：
-- -------------------- ---- -------
---- -
-------- -------------
-------- ------ -----
------- --- ----- -----
-------------- ----
------ -----
---------- -----
---------------- -----
----------- -------
-
---- -
------- -----
----------------- -----
---------- -
----------------- --------
------ -----
-
--------- -
----------------- --------
------ -----
-
---------- -
----------------- --------
------ -----
-
---------- -
----------------- --------
------ -----
-
-在这个例子中，我们使用 % 表示 placeholder 声明一个按钮的基本样式，然后在 .btn 中使用 @extend 继承基本样式。同时，通过使用修饰符，我们可以轻松地创建各种样式的按钮。
3. 嵌套
在 Sass 中，可以使用嵌套语法来更好地组织和管理代码。使用嵌套可以帮助我们更容易地理解和维护样式，同时也使代码更具可读性。
例如：
-- -------------------- ---- -------
---- -
-------- -----
---------------- --------------
------- -
---------------- -----
------------ -----
------------- -----
--------- -
------------ -----
-
-
-在这个例子中，我们可以很容易地看到 .nav__link 的样式，因为它们都位于 .nav 的内部。
结论
使用 BEM 命名法可以使 CSS 更具可读性和可维护性。在 Sass 中使用 BEM，可以更方便地管理块、元素和修饰符之间的关系。在开发过程中，应遵循命名规则、使用继承和嵌套语法，以提高效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6749b052a1ce0063546cd686