与SASS结构CSS类选择器

关键要点

• BEM 和 SMACSS 等 CSS 命名约定严重依赖 CSS 类选择器，而使用 Sass 可以使编写这些选择器更模块化和可重用。
• Sass 中的原生选择器嵌套允许从文档根级别的原始块名称创建子类名称，从而简化代码并减少对变量或 mixin 等额外辅助工具的需求。
• BEM mixin 提供了一个友好的 API，一旦您了解 BEM 的工作原理，就很容易理解，尽管逻辑隐藏在 mixin 后面，这可能会使生成新的选择器和类不那么明显。
• Humanified-BEM mixin 旨在通过隐藏 Block-Element-Modifier 专业术语来提高代码的可读性，但这对于某些开发人员来说可能涉及过多的抽象。

CSS 命名约定有很多。您可能已经了解 BEM 和 SMACSS（后者不仅仅是命名约定）。还有 OOCSS，它更像是一种完整的方法论。它们都严重依赖 CSS 类选择器，因为它们具有很强的可重用性。

使用 Sass 可以帮助以更模块化的方式编写这些选择器。通过选择器嵌套和 mixin，我们可以提出花哨的疯狂的解决方案来构建所需的 API。在本文中，我将（重新）介绍其中几种方法，列出我认为每种方法的优缺点。

原生选择器嵌套

为了不必重复原始块名称而能够嵌套选择器，这在 Sass 中一直是一个长期要求的功能。在 Sass 3.3 版本中，此功能最终已引入。在测试版期间，首先使用非常奇怪的语法，后来在稳定版本上线时更改为更好的语法。Natalie Weizenbaum 在这篇文章中解释了更改背后的原因。

基本上，引用选择器（&）可以用作子类名称的一部分，以便从文档的根级别（这意味着此处不需要 @at-root）创建第一个类名称的另一个类名称。

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

此功能很快就被过度使用来编写 BEM 选择器，例如非常流行的媒体对象：

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

之前的代码将编译为：

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

优点

• 它依赖于原生功能，不需要额外的辅助工具，例如变量或 mixin。
• 一旦您了解引用选择器（&）的工作原理，总体上就很容易掌握。

缺点

• 它公开了 & 语法，如果对于不熟悉 Sass 的开发人员来说，这可能会稍微令人困惑，甚至令人恐惧。
• 除非使用 @at-root，否则嵌套通常不会在根目录打印，这可能会令人不安。

BEM mixin

因为在 Sass 3.3 的测试版期间类生成的语法非常难看（@at-root #{&}__element），我们很快就在这里和那里看到了一些 mixin 来隐藏痛苦并提供更友好的 API。

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

您可以像这样使用它们：

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

我们也可以以同样的方式创建一个块 mixin，但它不会像块那样有用，因为块只是一个类名称。让我们保持简单。尽管对于某些人来说，修饰符和元素似乎太长了，所以我们看到一些 e 和 m 在盛开。

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

优点

• 此版本提供了一个友好的 API，一旦您了解 BEM 的工作原理，就很容易理解。

缺点

• 逻辑隐藏在 mixin 后面，除非您明确知道发生了什么，否则生成新的选择器和类并不那么明显。
• 单个字母 mixin 可能不是一个好主意，因为它们使理解 mixin 的用途变得困难。b 和 m 可以表示很多东西。

Humanified-BEM mixin

最近，我阅读了 Anders Schmidt Hansen 的一种新的类似 BEM 的方法。其思想是将 Block-Element-Modifier 专业术语隐藏在朗读时有意义的常用词汇后面。

<code>@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}</code>

在这种情况下，重点是将代码隐藏在精心命名的 mixin 后面，以便代码看起来像是在讲述一个故事，因此新的 mixin 实际上很有用。

<code>.media {
  // .media 块的样式

  @include element("image") {
    // .media__image 元素的样式

    @include modifier("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include modifier("new") {
    // .media--new 修饰符的样式
  }
}</code>

Anders 进一步使用 is(..) 和 holds(..) mixin。整个想法让我想起了我的 when-inside(..) mixin，当根据其上级上下文设置元素样式时，它将 & 隐藏在一个用户友好的 mixin 后面。

<code>.media {
  // .media 块的样式

  @include e("image") {
    // .media__image 元素的样式

    @include m("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include m("new") {
    // .media--new 修饰符的样式
  }
}</code>

优点

• 这种方法有助于提高代码的可读性，就像我们开始使用前导 is-（由 SMACSS 推广）为我们的状态类命名一样。
• 仍然坚持特定方法（在本例中为 BEM），但使其更易于开发人员使用。

缺点

• 更多的 mixin、更多的辅助工具、更多的东西需要学习，才能获得更稳定的学习曲线。并非每个人都喜欢处理大量的 mixin 来编写诸如 CSS 选择器之类的简单内容。
• 这对于某些人来说可能过于抽象；并非每个人都喜欢像阅读英语一样阅读代码。这取决于情况。

最终想法

请记住，使用任何这些技术都会阻止选择器代码库可搜索，因为选择器在由 Sass 生成之前实际上并不存在。在选择器之前添加注释可以解决这个问题，但为什么不一开始就直接编写选择器呢？

如果您关心拥有可搜索的代码库，请不要使用新的 Sass 功能来 BEM 化所有选择器（.b { &__e { } }）。

— Kaelig (@kaelig) 2014 年 3 月 12 日

无论如何，朋友们，以下是我知道的用 Sass 编写 CSS 选择器最流行的方法，在我和你之间，我不喜欢它们。而且不仅仅是因为搜索问题，对我来说这并不是什么大问题。

我可以看出他们试图解决的问题，但有时简单胜过 DRY。重复根选择器并不是什么大问题，它不仅使代码更易于阅读，因为嵌套较少，而且更接近 CSS。

有时简单胜过 DRY。

— Hugo Giraudel (@HugoGiraudel) 2015 年 5 月 19 日

关于使用 SASS 结构化 CSS 类选择器的常见问题

使用 SASS 结构化 CSS 类选择器的意义是什么？

使用 SASS 结构化 CSS 类选择器对于维护干净、有序和高效的样式表至关重要。SASS（代表 Syntactically Awesome Stylesheets）是一种 CSS 预处理器，允许开发人员使用变量、嵌套规则、mixin 和函数，使 CSS 更具动态性和可重用性。通过结构化类选择器，您可以创建样式层次结构，从而更容易理解不同元素及其样式之间的关系。这可以极大地提高 CSS 代码的可维护性和可扩展性。

如何在 SASS 中使用通配符选择器？

通配符选择器，也称为通用选择器，可以在 SASS 中用于选择与特定模式匹配的任何元素。例如，您可以使用通配符选择器“*”来选择所有元素。但是，SASS 不直接支持通配符类名。如果您想选择类名以特定字符串开头的元素，则需要使用变通方法，例如使用属性选择器。例如，您可以使用选择器[class^="prefix-"]来选择所有类名以“prefix-”开头的元素。

我可以在 SASS 中使用 @extend 指令与类选择器吗？

是的，@extend 指令可以在 SASS 中与类选择器一起使用。@extend 指令允许一个选择器继承另一个选择器的样式。这对于减少 CSS 代码中的冗余非常有用。例如，如果您有两个类共享许多相同的样式，则可以在一个类中定义这些样式，然后使用 @extend 指令将这些样式应用于另一个类。

如何使用 SASS 更有效地组织 CSS 代码？

SASS 提供了一些功能，可以帮助您更有效地组织 CSS 代码。其中一项功能是嵌套，它允许您将 CSS 选择器嵌套在其他选择器中，从而反映 HTML 结构。这可以使您的 CSS 代码更易于阅读和维护。另一个功能是变量，它允许您定义可重用的值。这对于维护样式的一致性（例如颜色、字体和间距）非常有用。

使用 SASS 结构化 CSS 类选择器的最佳实践是什么？

使用 SASS 结构化 CSS 类选择器有几种最佳实践。一种最佳实践是使选择器尽可能具体。这可以帮助防止样式意外影响其他元素。另一种最佳实践是使用有意义的类名来描述元素的目的或功能。这可以使您的 CSS 代码更易于阅读和维护。此外，最好对您的类使用一致的命名约定，例如 BEM（块、元素、修饰符），以便更容易理解不同类之间的关系。

如何在 SASS 中使用 mixin 重用 CSS 代码？

SASS 中的 mixin 是一种定义可以在整个样式表中重用的样式的方法。mixin 使用 @mixin 指令定义，后跟名称和 CSS 代码块。然后，您可以使用 @include 指令（后跟 mixin 的名称）在任何选择器中包含 mixin。这对于减少 CSS 代码中的冗余并使其更易于维护非常有用。

我可以在 SASS 中使用函数生成 CSS 代码吗？

是的，SASS 支持函数，可用于生成 CSS 代码。SASS 中的函数使用 @function 指令定义，后跟名称和代码块。函数可以接受参数，并返回一个值，该值可以在您的 CSS 代码中使用。这对于创建依赖于特定条件或计算的复杂样式非常有用。

如何在 SASS 中使用 @import 指令组织 CSS 代码？

SASS 中的 @import 指令可用于将其他 SASS 文件导入 SASS 文件。这对于将 CSS 代码组织到单独的文件中非常有用，每个文件都专注于网站样式的特定部分。例如，您可以为页眉样式、页脚样式和主要内容样式创建单独的 SASS 文件，然后将它们全部导入主 SASS 文件。

如何在 SASS 中使用 & 运算符引用父选择器？

SASS 中的 & 运算符可用于在嵌套规则中引用父选择器。这对于创建伪类或伪元素选择器非常有用。例如，如果您有一个嵌套规则用于 .link 规则内的 a:hover，则可以使用 & 运算符创建选择器 .link:hover。

如何在 SASS 中使用 @media 指令创建响应式样式？

SASS 中的 @media 指令可用于创建媒体查询，允许您根据查看页面的设备的特性（例如其宽度或高度）应用不同的样式。这对于创建适应不同屏幕尺寸的响应式设计非常有用。您可以将 @media 指令用于选择器中，仅当媒体查询条件满足时才应用样式。

以上是与SASS结构CSS类选择器的详细内容。更多信息请关注PHP中文网其他相关文章！