分组 HTML 类可以提高可读性吗？

您可以在一个 HTML 元素上使用多个类

<div class="module p-2"></div>

没有任何错误或无效的地方。 它有两个类。 在 CSS 中，这两个类都会被应用

.module { }
.p-2 { }

const div = document.querySelector("div");
console.log(div.classList.contains("module")); // true
console.log(div.classList.contains("p-3"));    // false

但是分组它们呢？ 我们这里只有一个空格分隔的字符串。 也许这很好。 但也许我们可以让事情更清晰！

几年前，Harry Roberts 谈到了分组它们。 他将类组用方括号括起来

<div class="[ foo  foo--bar ]  [ baz  baz--foo ]">

上面的示例类名完全是抽象的，只是为了演示分组。 想象一下，它们就像主要名称和变体作为一个组，然后是实用程序类作为另一个组

<header class="[ site-header site-header-large ]  [ mb-10 p-15 ]">

那些方括号？ 毫无意义。 它们只是为了让我们开发人员在视觉上表示这些组。 从技术上讲，它们也是类，所以如果某个虐待狂写了 .[ {}，它会在你的 CSS 中执行一些操作。 但这种情况不太可能发生，希望组的清晰度胜过它，对我们更有帮助。

上面的例子将主要名称和一个变体分组在一个组中，将一些示例实用程序类分组在另一个组中。

我不一定推荐这种方法。 它们只是你可能拥有的类组。

以下是以不同分组方式进行的相同分组风格

<button class="[ link-button ] [ font-base text-xs color-primary ] [ js-trigger ]" type="button" hidden>

该示例包含一个主要名称，具有不同命名风格的实用程序类，以及一个用于 JavaScript 特定选择器的第三个组。

Harry 在几年前就放弃了这种方法，他说它的外观对于他合作过的各种人和他团队来说太奇怪了。 它引起了足够的混乱，以至于分组类的益处不值得。 他建议使用换行符代替

<div class="media  media--large
            testimonial  testimonial--main"> 

在我看来这似乎同样清晰。 HTML 中的换行符完全没问题。 此外，浏览器不会有任何问题，而且 JSX 通常在 HTML 中使用大量换行符，因为在元素中添加了大量额外内容，例如事件处理程序和道具。

也许我们可以将换行符作为分隔符和标识组的思想结合起来……使用表情符号！

查看 Pen
分组类 by Chris Coyier (@chriscoyier)
on CodePen.

很奇怪，但很有趣。 表情符号在那里完全有效。 就像方括号一样，如果有人为它们编写了一个类名，它们也可以执行一些操作，但这通常不太可能，而且需要团队讨论。

我见过另一种方法是使用data-* 属性来代替类进行分组，比如……

<div 
  class="primary-name"
  data-js="js-hook-1 js-hook-2"
  data-utilities="padding-large"
>

您仍然可以在 CSS 和 JavaScript 中根据属性进行选择和样式化，因此它具有功能性，尽管由于笨拙的选择器（如[data-js="js-hook-1"]）和缺少像classList这样的便捷 API，因此略有不方便。

您呢？ 您是否还有其他巧妙的类名分组想法？