LESS 中使用 BEM 命名规范的技巧-JavaScript中文网-JavaScript教程资源分享门户

LESS 中使用 BEM 命名规范的技巧

在前端开发中，CSS 的命名规范一直是一个备受争议的话题。BEM（Block, Element, Modifier）命名规范是一种常见的CSS命名规范。它的优点是可以提高代码的可读性和可维护性。下面我们将探讨如何在LESS中使用BEM命名规范来构建高效的样式代码。

BEM命名规范

BEM命名规范是一个组件化的命名方法。它定义了三个部分，即块（Block），元素（Element）和修饰符（Modifier）：

1、块（Block）是一个独立的可复用的组件，它可以包含多个元素。

2、元素（Element）是块的一部分，它们不能与其他的块混在一起使用。

3、修饰符（Modifier）是用来定义块或元素的状态和变化的。

示例代码：

.block {}
.block__element {}
.block--modifier {}

其中，“block”是块的名称，“element”是元素的名称，“modifier”是修饰符的名称。在这个示例中，块的类名为“.block”，元素的类名为“.block__element”，修饰符的类名为“.block--modifier”。

注意：BEM命名规范是一种命名约定，并不是一种样式结构的规范。我们可以根据自己的需求来组织样式代码，只要遵循BEM命名规范即可。

使用前缀

在编写样式代码时，我们可以使用前缀来限制样式的作用范围。例如，我们可以使用“.header__logo”这样的前缀来限制样式只作用于头部模块的logo元素。

示例代码：

// javascriptcn.com 代码示例
.header {
  &__logo {
    width: 100px;
    height: 50px;
  }
}

.sidebar {
  &__nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
}

在这个示例中，“header”和“sidebar”是块，它们可以包含多个元素。元素的类名为“__”，修饰符的类名为“--”。使用“&”符号来引用父元素。

使用变量

使用LESS变量可以提高代码的可维护性。将BEM命名规范和LESS变量结合使用，可以简化样式代码的编写过程。

示例代码：

// javascriptcn.com 代码示例
@primary-color: #007bff;

.button {
  color: @primary-color;
  background-color: lightgray;
  
  &--active {
    background-color: @primary-color;
  }
}

在这个示例中，我们定义了一个名为“primary-color”的LESS变量，并将它用于按钮的颜色和背景色属性中。为了定义修饰符，我们使用“--”来表示激活状态。在定义修饰符时，只需要修改变量的值即可。

使用混合器

混合器是一种重用样式代码的方式，可以提高代码的可复用性和可维护性。我们可以使用混合器来生成BEM命名规范中的类名和样式。

示例代码：

// javascriptcn.com 代码示例
// 混合器：生成BEM命名规范中的类名
.bem(@name, @element: false, @modifier: false) {
  @selector: ~".@{name}";
  @elementSelector: ~"&__@{element}";
  @modifierSelector: ~"&--@{modifier}";
  
  @selector: @selector when(@element);
  @selector: @selector when(@modifier);
  
  &@{selector}@{elementSelector}@{modifierSelector} {
    @content();
  }
}

// 使用混合器：生成类名和样式
.bem("header") {
  background-color: lightgray;
  
  .bem("logo") {
    width: 100px;
    height: 50px;
  }
  
  .bem("nav") {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
}

在这个示例中，我们定义了一个名为“bem”的混合器，用来生成BEM命名规范中的类名和样式。我们通过“name”、“element”和“modifier”参数来生成块、元素和修饰符的类名。使用“&”符号来引用父元素，在生成块、元素和修饰符的类名时，只需要传入对应的参数即可。

总结

LESS中使用BEM命名规范可以提高代码的可读性和可维护性。通过使用前缀、变量和混合器来生成BEM命名规范中的类名和样式，我们可以更加高效地编写样式代码。在实践中，我们应该根据自己的需求来组织样式代码，遵循BEM命名规范即可。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654047557d4982a6eb9c392c