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

什么是 BEM 命名规范？

BEM 是 Block（块）、Element（元素）、Modifier（修饰符）的缩写，是由 Yandex 团队提出的一种前端命名规范。该规范的目的是为了让前端开发人员能够更加方便地编写有可读性、可复用性、易维护性的样式。

块

一个块是一个独立的、可复用的组件。块应该将自己的结构、外观与其他块隔离开来，并且应该包含所有必需的元素和修饰符。每个块应该有一个唯一的类名。

.block {
  background: #FFFFFF;
}

元素

元素是块的一部分，不能单独存在。元素的命名应该基于块的类名，中间用两个下划线隔开。元素的类名应该写在块的类名后面。

.block__element {
  color: #000000;
}

修饰符

修饰符是块或元素的一个属性，用来改变外观或行为。修饰符的命名应该基于块或元素的类名，中间用两个短横线隔开。修饰符的类名应该写在块或元素的类名后面。

.block--modifier {
  background: #000000;
}

.block__element--modifier {
  color: #FFFFFF;
}

如何使用 BEM 命名规范？

在 LESS 中使用 BEM 命名规范非常简单，只需要根据规范在 CSS 中定义相应的类名即可。

.block {
  background: #FFFFFF;

  &__element {
    color: #000000;

    &--modifier {
      color: #FFFFFF;
    }
  }

  &--modifier {
    background: #000000;
  }
}

在 HTML 中，只需要根据类名定义相应的元素即可。

<div class="block">
  <span class="block__element">Hello, world!</span>
  <span class="block__element--modifier">Hello, world!</span>
</div>

BEM 命名规范的优点

BEM 命名规范有很多优点，包括：

可读性高

BEM 命名规范能够提高代码的可读性。由于所有的类名都有固定的格式，并且能够很好地描述元素的结构和功能，因此开发人员能够更加容易地阅读和理解代码。

可复用性强

BEM 命名规范能够提高代码的可复用性。由于块和元素都是独立的组件，并且具有唯一的类名，因此它们可以在多个页面和项目中重复使用。

易维护性好

BEM 命名规范能够提高代码的易维护性。由于所有的类名都有固定的格式，并且能够很好地描述元素的结构和功能，因此开发人员能够更加容易地修改和维护代码。

总结

BEM 命名规范是一种强大的前端命名规范，能够提高代码的可读性、可复用性和易维护性。在 LESS 中使用 BEM 命名规范非常简单，只需要根据规范在 CSS 中定义相应的类名即可。我们应该在实际项目中积极采用 BEM 命名规范，以提高我们的开发效率和代码质量。

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