分组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="[module p-2] [utility-class-1 utility-class-2]"></div>

<p></p> 标签内的文字解释了方括号分组的含义，以及这种方法的优缺点。 方括号本身在技术上也是类名的一部分，但这种冲突的可能性很小。

文章中还探讨了其他分组方法，例如使用换行符分隔类名：

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

以及结合换行符和表情符号：

<div class="module p-2 ?
            utility-class-1 utility-class-2 ?"></div>

最后，文章还提到了使用 data-* 属性进行分组：

<div data-js="js-hook-1 js-hook-2" data-utilities="padding-large"></div>

这种方法虽然功能上可行，但选择器和 API 使用起来不如 classList 方便。

文章最后向读者提问，是否有其他巧妙的类名分组方法。

以上是分组HTML课程可以使它们更可读吗？的详细内容。更多信息请关注PHP中文网其他相关文章！