在前端开发中，BEM（Block-Element-Modifier）是一种流行的命名规范，它能够帮助我们更好地组织代码，提高代码的可读性和可维护性。在 LESS 中，我们可以通过一些技巧来编写符合 BEM 规范的代码，下面就让我们来详细了解一下。
什么是 BEM 规范
BEM 是由 Yandex 团队提出的一种命名规范，它将页面中的元素分为三个部分：块（Block）、元素（Element）和修饰符（Modifier）。具体来说：
- 块（Block）：独立的、可重复使用的组件，例如按钮、导航栏等。
- 元素（Element）：块中的一部分，具有依赖于块的语义，例如按钮中的文字、图标等。
- 修饰符（Modifier）：用于修改块或元素的外观、状态或行为，例如按钮的大小、颜色等。
BEM 规范的命名方式为 block__element--modifier，其中 block、element 和 modifier 都是由小写字母、数字、连字符（-）组成的字符串。例如，一个按钮块的 HTML 结构可能如下所示：
<button class="button button--primary button--large">Click me</button>
在上面的例子中，.button 是块，.button--primary 和 .button--large 是修饰符。
在 LESS 中编写 BEM 规范的代码
为了更好地编写符合 BEM 规范的 LESS 代码，我们可以使用以下技巧。
使用变量
在 LESS 中，我们可以使用变量来存储颜色、字体大小等常用的属性值。这样可以方便地在不同的块和元素中重复使用，从而避免出现重复的代码。例如：
-- -------------------- ---- -------
--------------- --------
---------------- ---- -----
------- -
----------------- ---------------
-------- ----------------
------- -----
------ -----
------- --------
-------- -
-------- --------------- - ----
-
-------- -
-------- --------------- - ----
-
-在上面的例子中，我们使用 @primary-color 和 @button-padding 变量来存储按钮的背景色和内边距。同时，我们使用 &--large 和 &--small 来分别定义了按钮的大尺寸和小尺寸。
使用 Mixin
在 LESS 中，Mixin 是一种常用的代码复用方式，它可以将一段样式代码封装到一个函数中，并在需要的地方调用。因此，我们可以使用 Mixin 来定义符合 BEM 规范的样式代码。例如：
-- -------------------- ---- -------
------- -
-------------------------- ------------ -
----------------- ----------
------ ------------
------- -----
------- --------
-
------- -
---------- -----
-
---------- -
------------------------ ------
-
------------ -
------------------------ ------
-
---------- -
--------------------- ---------
------- --- ----- --------
-
-在上面的例子中，我们使用 .button-variant() Mixin 来定义了按钮的背景色和文字颜色。同时，我们使用 &--primary、&--secondary 和 &--outline 来分别定义了按钮的主要样式、次要样式和轮廓样式。
使用嵌套
在 LESS 中，我们可以使用嵌套来更好地组织代码，并减少代码的层级。因此，我们可以使用嵌套来编写符合 BEM 规范的代码。例如：
-- -------------------- ---- -------
------- -
----------------- --------
------ -----
------- -----
------- --------
------- -
---------- -----
-
-------- -
-------- ---- ---- - ----
------- -
---------- -----
-
-
-------- -
-------- ---- ---- - ----
------- -
---------- -----
-
-
-在上面的例子中，我们使用嵌套来定义了按钮的大尺寸和小尺寸。同时，我们使用 &__text 来定义了按钮的文字样式。
总结
在 LESS 中编写符合 BEM 规范的代码可以让我们更好地组织代码，提高代码的可读性和可维护性。我们可以使用变量、Mixin 和嵌套等技巧来编写符合 BEM 规范的代码，从而让我们的代码更加清晰易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650905ca95b1f8cacd3cfceb