前端开发中，样式的命名一直是一个非常重要的话题。Web 开发中使用的 BEM 命名法则，是当前比较流行的命名方式之一。它的全名叫做 "块、元素、修饰符" 直译成中文，也就是将一个 Web 页面中的各个部分划分成块、元素和修饰符三个层级，分别描述出 Web 页面中组成部分的基本特征，从而达到清晰可读，易于维护的效果。而在 LESS 中使用 BEM 命名法，可以更大程度地避免 CSS 样式冲突等问题，方便团队合作维护项目。
BEM 命名法概述
BEM 命名法是一种 CSS 类命名的规范，它的三个部分组成如下：
- 块（Block）：代表高层次（如页面）中的组件的独立块，类名使用单词连字符（
-）。 - 元素（Element）：块的一个组成部分，类名使用双下划线（
__）。 - 修饰符（Modifier）：一种可用于块和元素的修饰符，用于定义它们的外观、状态等特征，类名使用“修饰符”单词和双连字符（
--）。
因此，一个具有层次结构的完整的样式类名应该是这样的：.block__element--modifier。
例如：
<div class="header header--main"> <div class="header__logo"></div> <div class="header__nav"></div> </div>
在这个示例中，.header 是一个块，.header__logo 和 .header__nav 是 .header 的元素，.header--main 是 .header 的一个修饰符。
在 LESS 中使用 BEM 命名法
LESS 是一种预处理器语言，它将 CSS 语言进行扩展并增加了许多新的功能。通过 LESS，可以更优雅地定义样式，避免代码的重复和冗余。
LESS 中可以使用 BEM 的命名方式来定义样式，同时，还有一些很有用的函数和语法来辅助我们更好地完成样式的编写。下面，我们将讲解具体的步骤和注意事项。
BEM 的语法
在 LESS 中，可以使用和 CSS 相同的 BEM 划分方式，只是需要添加变量前缀和使用中括号括起来。例如：
@block: .header; @element: &__nav; @modifier: &--dark;
这里的 & 实现了 BEM 中的上下文语义，代表当前选择器的父级。
可以用这些变量来定义 Less 的类选择器，例如：
-- -------------------- ---- -------
------- --------
--------- -------
---------- --------
-------- -
---------- -----
---------- -
------ ----
-
----------- -
------ -----
-
-这样编译出来的 CSS 如下：
-- -------------------- ---- ------- ------- - ---------- ----- - ------------ - ------ ---- - ------------- - ------ ----- -
使用 mixin 函数
LESS 中非常实用的一个功能是 mixin 函数，它能够让我们定义可重用的类名和样式，可以将一个块的公共样式和属性都写在 mixin 中。
在 LESS 中，定义 mixin 使用 . 开头，类似于定义类名，例如：
-- -------------------- ---- -------
------------ -
------- -
---------------- -----
------ -----
-
----------- -
------ -----
-
- -
--------
-------- -
------ -----
-
-
-这里我们定义了一个名为 .link 的 mixin，包含了文本的装饰（去掉下划线并加上鼠标悬浮效果），在 a 标签中使用它。
嵌套的 BEM
LESS 中可以模拟 HTML 的嵌套结构，也可以嵌套 BEM 的结构。例如：
-- -------------------- ---- -------
------- --------
--------- -------
---------- --------
-------- -
-- ---
---------- -
-- ---
------- -
-- ---
-
------- -
-- ---
-
-
-这里定义了 .header__nav 的样式和 .header__nav--dark 的样式，以及 .header__nav:hover 的样式。
可以看到，这种嵌套的结构更加紧凑，并且能够明确地表达出 BEM 的层次结构，对样式的分层管理十分有用。
变量的使用
在 LESS 中，可以使用变量来存储多次重复使用的样式元素，减少代码冗余，更方便修改样式。
例如，可以定义一组颜色变量：
@blue: #2196F3; @white: #FFFFFF;
然后在样式中使用：
-- -------------------- ---- -------
------- --------
--------- -------
---------- --------
-------- -
----------------- ------
------ -------
---------- -
------ -------
----------------- ------------- -----
-
----------- -
----------------- -------------- -----
-
-上面的代码中，使用了 LESS 的变量功能存储颜色，使得 CSS 样式更加易于维护。
总结
在 LESS 中使用 BEM 命名法虽然需要一定的编写成本，但是它能够避免样式冲突等问题，方便团队合作维护项目，具有很大的指导意义。通过本文的介绍，我们了解了在 LESS 中使用 BEM 的一些基本语法和技巧，希望能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6452238a675af4061b5cafc6