Sass 保持 BEM 风格的实践方法

什么是 BEM

BEM 是一种类名命名规范，全称为 Block Element Modifier。它是一种用于前端开发的规范化 CSS 类名的标准化方法，可以让你的代码更具可读性、可维护性和可重用性。

BEM 的命名思路是将一个页面元素拆分为独立的组成部分，即 “块”、“元素” 和“修饰符” 等组成部分，并用双下划线 "__" 和双中划线 "--" 来连接它们。下面是 BEM 命名的示例：

<div class="block">
  <div class="block__element">
    <div class="block__element--modifier"></div>
  </div>
</div>

从上面的代码中可以看出，这个示例中的块名为 “block”，元素名为 “element”，修饰符名为“modifier”。

Sass 如何保持 BEM 风格

当我们使用 Sass 开发时，为了保持 BEM 的风格，我们需要有效地利用嵌套、继承和 mixin 等功能。下面是一些示例：

基本嵌套

在 Sass 中，我们可以使用基本的嵌套来表示 BEM 结构。例如：

.block {
  &__element {
    &--modifier {
      // ...
    }
  }
}

上述代码所示的是基本的 Sass 代码结构，与 BEM 规范相匹配。请注意，这个例子中使用了“&”符号，这个符号表示“引用当前节点”。这样就可以将 BEM 结构在 Sass 中轻松重现。

继承

如果您有一些块或元素共享相同的样式，您可以将这些样式提取到公共类中，并在需要的地方继承它。例如：

.block {
  &__element {
    // 定义公共类
    @mixin basic-styles {
      display: block;
      width: 100%;
    }

    // 继承公共类
    &--modifier {
      @include basic-styles;
      background-color: red;
    }
  }
}

上述代码所示的是如何使用 mixin 来定义并继承公共类。这些公共类可以在您的代码库中重复使用，从而提高 CSS 代码的重用性。

Mixin

如果我们需要在同一块中重复使用相同的样式，则可以使用 mixin 功能。例如：

@mixin block {
  display: block;
  width: 100%;
}

.block {
  @include block;

  &__element {
    @include block;
  }
}

上述代码所示的是如何使用 mixin 来定义块中的公共类。这些公共类可以被其他元素和块重复使用，提高代码的可重用性。

总结

BEM 是一种命名规范，可以使我们的代码更具可读性、可维护性和可重用性。在使用 Sass 时，通过利用嵌套、继承和 mixin 等功能，我们可以轻松地实现 BEM 的风格，并使我们的代码变得更加优雅和易于维护。在前端开发的实践中，BEM 和 Sass 是两个不可或缺的工具，将它们相结合，可以让我们的代码更加高效、优雅和扩展。

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