LESS 中如何编写 BEM 规范的代码-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，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 中，我们可以使用变量来存储颜色、字体大小等常用的属性值。这样可以方便地在不同的块和元素中重复使用，从而避免出现重复的代码。例如：

// javascriptcn.com 代码示例
@primary-color: #007bff;
@button-padding: 10px 20px;

.button {
  background-color: @primary-color;
  padding: @button-padding;
  border: none;
  color: #fff;
  cursor: pointer;
  
  &--large {
    padding: @button-padding * 1.5;
  }
  
  &--small {
    padding: @button-padding * 0.5;
  }
}

在上面的例子中，我们使用 @primary-color 和 @button-padding 变量来存储按钮的背景色和内边距。同时，我们使用 &--large 和 &--small 来分别定义了按钮的大尺寸和小尺寸。

使用 Mixin

在 LESS 中，Mixin 是一种常用的代码复用方式，它可以将一段样式代码封装到一个函数中，并在需要的地方调用。因此，我们可以使用 Mixin 来定义符合 BEM 规范的样式代码。例如：

// javascriptcn.com 代码示例
.button {
  .button-variant(@bg-color, @text-color) {
    background-color: @bg-color;
    color: @text-color;
    border: none;
    cursor: pointer;
  }
  
  &__text {
    font-size: 14px;
  }
  
  &--primary {
    .button-variant(#007bff, #fff);
  }
  
  &--secondary {
    .button-variant(#6c757d, #fff);
  }
  
  &--outline {
    .button-variant(#fff, #007bff);
    border: 1px solid #007bff;
  }
}

在上面的例子中，我们使用 .button-variant() Mixin 来定义了按钮的背景色和文字颜色。同时，我们使用 &--primary、&--secondary 和 &--outline 来分别定义了按钮的主要样式、次要样式和轮廓样式。

使用嵌套

在 LESS 中，我们可以使用嵌套来更好地组织代码，并减少代码的层级。因此，我们可以使用嵌套来编写符合 BEM 规范的代码。例如：

// javascriptcn.com 代码示例
.button {
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  
  &__text {
    font-size: 14px;
  }
  
  &--large {
    padding: 10px 20px * 1.5;
    
    &__text {
      font-size: 16px;
    }
  }
  
  &--small {
    padding: 10px 20px * 0.5;
    
    &__text {
      font-size: 12px;
    }
  }
}

在上面的例子中，我们使用嵌套来定义了按钮的大尺寸和小尺寸。同时，我们使用 &__text 来定义了按钮的文字样式。

总结

在 LESS 中编写符合 BEM 规范的代码可以让我们更好地组织代码，提高代码的可读性和可维护性。我们可以使用变量、Mixin 和嵌套等技巧来编写符合 BEM 规范的代码，从而让我们的代码更加清晰易懂。

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