什么是 BEM？
BEM 是块、元素、修饰符（Block, Element, Modifier）的缩写，是一种前端代码规范，旨在提高代码的可读性、可维护性和可扩展性。BEM 规范将页面分解为独立的模块，每个模块都有自己的命名空间，使得页面结构更加清晰明了。
为什么要使用 BEM？
使用 BEM 可以带来以下好处：
- 可读性：BEM 命名规范清晰明了，易于理解和阅读。
- 可维护性：BEM 规范使得代码更加模块化，便于维护和修改。
- 可扩展性：BEM 规范使得代码更加灵活，便于扩展和重用。
如何在 LESS 中使用 BEM？
在 LESS 中使用 BEM，可以通过嵌套规则和变量来实现。
块（Block）
块是页面中的独立模块，可以是一个组件、一个模块或一个页面的一部分。块应该有一个唯一的名称，以表示它的功能。在 LESS 中，可以使用类似下面的代码来定义一个块：
.block {
// styles
}元素（Element）
元素是块的一部分，用于描述块的组成部分。元素应该有一个与块相同的前缀，以表示它属于哪个块。在 LESS 中，可以使用类似下面的代码来定义一个元素：
.block__element {
// styles
}修饰符（Modifier）
修饰符用于描述块或元素的状态或变化。修饰符应该有一个以两个连字符开头的名称，以表示它是一个修饰符。在 LESS 中，可以使用类似下面的代码来定义一个修饰符：
.block--modifier {
// styles
}
.block__element--modifier {
// styles
}示例代码
下面是一个使用 BEM 规范的示例代码：
-- -------------------- ---- -------
------ -
----------------- --------
-------- -----
-------- -
---------- -----
------------ -----
-
---------- -
---------- -----
------------ ----
-
------------ -
----------------- --------
-
-在上面的代码中，.block 是一个块，.block__title 和 .block__content 是 .block 的元素，.block--highlight 是 .block 的修饰符。
总结
BEM 是一种前端代码规范，可以提高代码的可读性、可维护性和可扩展性。在 LESS 中使用 BEM，可以通过嵌套规则和变量来实现。使用 BEM 可以使得代码更加模块化、灵活和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66134575d10417a2223a6b0a