如何在 LESS 中使用 BEM 命名法编写 CSS

如何在 LESS 中使用 BEM 命名法编写 CSS

前言：

编写 CSS 时，命名是非常重要的一个环节。目前比较流行的命名法有两种，BEM 和 OOCSS。

BEM 是 Block Element Modifier，中文意思为“块、元素、修饰符”。它是一种组件化思想，将页面拆分为多个独立的组件，每个组件都应有自己的特定作用和独立的 CSS 样式。BEM 侧重于命名规范的标准化和可维护性。通过统一的命名规范，可以增加代码的可读性和可维护性。

LESS 是一种 CSS 预处理器，是 CSS 的一种扩展。它允许使用变量、函数、运算和嵌套，使 CSS 更具有编程性、可维护性和扩展性。

本文将重点介绍在 LESS 中如何使用 BEM 命名法来编写 CSS。

一、BEM 命名法的基本规则

1、组件的命名使用单个字母小写，单词之间使用中划线 - 连接

例如：nav、header、siderbar

2、组件中的元素使用宿主组件的名称加上它自己的描述性词语进行命名

例如：nav-link、header-title、siderbar-menu

3、组件中的任何额外修饰都使用相应的描述性词语进行命名

例如：nav-link__active、header-title--small、siderbar-menu--collapsed

二、使用 LESS 编写 BEM 格式的 CSS

1、使用 mixin 实现 BEM 及其修饰符

LESS 中 mixin 就相当于函数，可以实现将 CSS 样式打包成可复用的代码块。

@mixin block($class, $element, $modifier) { .#{$class} { &__#{$element} { @content; } &--#{$modifier} { @content; } } }

使用方式：

@include block(nav, link, active) { color: #333; font-size: 14px; }

2、使用嵌套语法简化 BEM 命名法

极大地方便了开发者的编写，增强了 CSS 可维护性。

//js-bem.less .block { &__element { ... } &--modifier { ... } .block2 & { ... } }

使用方式：

.nav { .nav__link { color: #333; font-size: 14px; } .nav--active { background-color: #eee; } }

总结：

BEM 命名法确实可以增加代码的可读性和维护性，但是如果命名不当也容易造成类名过长，而嵌套也容易变得太深而难以维护。

因此，我们需要在实际项目中自行把握样式的复杂度和便捷性。在 LESS 中可以使用 Mixin 和嵌套语法来进一步简化 CSS 代码的编写，提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4c94648841e989412b6f3