如何使用 LESS 编写符合 BEM 命名规范的样式？-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，CSS 样式表是不可或缺的部分。样式表的编写方式直接关系到页面的渲染效果。而为了提高样式的可维护性和复用性，开发者们倾向于使用 BEM（Block-Element-Modifier）命名规范来编写样式表。而 LESS 可以方便我们编写 BEM 命名规范，本文将详细介绍如何使用 LESS 编写符合 BEM 命名规范的样式。

BEM 简介

BEM 是一种命名规范，它主要基于模块化思想，将样式中的每个元素拆分为三个部分，即块（block）、元素（element）和修饰符（modifier），从而实现样式表的易于管理和重用。

看一个示例，假设我们有一个按钮，我们可以将它拆分为块（block）、元素（element）和修饰符（modifier）：

<button class="btn btn--large btn--primary">点击我</button>

块：.btn
元素：.btn__text
修饰符：.btn--large 和 .btn--primary

使用 LESS 编写 BEM 样式

1. 安装 LESS

LESS 是一个 CSS 预处理器，它可以让我们使用类似编程语言的方式来编写 CSS。首先你需要安装 LESS，你可以使用 npm 安装：

npm install less --save-dev

2. BEM 命名规范

LESS 允许我们使用混合（mixins）、变量、嵌套规则等，这使得我们可以更加便捷地编写样式，从而实现更加符合 BEM 命名规范的代码。

首先我们需要为块、元素和修饰符分别定义样式：

/* 块 */
.btn {
  // ...
}

/* 元素 */
.btn__text {
  // ...
}

/* 修饰符 */
.btn--large {
  // ...
}

接下来，我们可以通过 mixin 和继承来组合块、元素和修饰符。

混合（Mixin）

在 LESS 中，混合指的是一种将样式组合在一起的方法。我们可以使用 .mixin() 函数来定义混合，然后在样式中引入混合。

下面是使用混合来组合块、元素和修饰符的示例：

/* 块 */
.btn {
  .btn-base();
}

/* 元素 */
.btn__text {
  .btn__text-base();
}

/* 混合：块、元素和修饰符的共同部分 */
.btn-base() {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  color: #333;
  border: 1px solid #999;
  &:hover {
    background-color: #f5f5f5;
  }
}

.btn__text-base() {
  margin: 0;
}

/* 修饰符 */
.btn--large {
  .btn-base();
  .btn--large-base();
}

.btn--large-base() {
  font-size: 18px;
  padding: 10px 16px;
}

在上面的示例中，我们定义了三个混合函数：.btn-base()、.btn__text-base() 和 .btn--large-base()，分别表示块、元素和修饰符的共同部分。我们可以通过混合将这些共同部分合并起来，然后在样式中引入混合，如 .btn、.btn__text 和 .btn--large。

继承（Extend）

除了混合，我们还可以使用继承来实现 CSS 代码的重用。在 LESS 中，继承使用符号 & 表示。

接下来，我们将上面的代码用继承方式实现：

/* 块 */
.btn {
  &:extend(.btn-base all);
}

/* 元素 */
.btn__text {
  &:extend(.btn__text-base all);
}

/* 块、元素和修饰符的共同部分 */
.btn-base() {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  color: #333;
  border: 1px solid #999;
  &:hover {
    background-color: #f5f5f5;
  }
}

.btn__text-base() {
  margin: 0;
}

/* 修饰符 */
.btn--large {
  &:extend(.btn-base all);
  &:extend(.btn--large-base all);
}

.btn--large-base() {
  font-size: 18px;
  padding: 10px 16px;
}

在上面的代码中，使用 & 符号来引用父选择器.btn、.btn__text 和 .btn--large 所共有的样式。

3. LESS 变量和嵌套规则

LESS 提供了变量和嵌套规则的支持，使代码更加清晰和易于维护。

下面是一个使用 LESS 变量和嵌套规则的示例：

/* 样式变量 */
@btn-bg-color: #1c7fd9;
@btn-text-color: #fff;
@btn-bg-color--hover: lighten(@btn-bg-color, 10%);

/* 块 */
.btn {
  &:extend(.btn-base all);
  background-color: @btn-bg-color;
  color: @btn-text-color;
  &:hover {
    background-color: @btn-bg-color--hover;
  }
}

/* 元素 */
.btn__text {
  &:extend(.btn__text-base all);
}

/* 块、元素和修饰符的共同部分 */
.btn-base() {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  border: 1px solid #999;
}

.btn__text-base() {
  margin: 0;
}

/* 修饰符 */
.btn--large {
  &:extend(.btn-base all);
  &:extend(.btn--large-base all);
}

.btn--large-base() {
  font-size: 18px;
  padding: 10px 16px;
}

在上面的代码中，我们使用了 @btn-bg-color 和 @btn-text-color 这两个样式变量，这样我们在引用这些颜色时只需要使用变量名称即可，便于样式修改和维护。

另外，我们还使用了 .btn:hover 的嵌套规则，这样可以让代码更加清晰易读。

总结

本文介绍了如何使用 LESS 编写符合 BEM 命名规范的样式。通过上面的示例，我们可以看出使用 LESS 可以很方便地编写符合 BEM 命名规范的代码，同时也提高了代码的可维护性和复用性。希望这篇文章能够帮助你更好地使用 LESS 和 BEM 来编写样式。

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

如何使用 LESS 编写符合 BEM 命名规范的样式？

前言