Could Grouping HTML Classes Make Them More Readable?

HTML elements can have multiple classes:

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

This works perfectly correctly and it has two classes. In CSS, both classes apply:

 .module { }
.p-2 { }

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

But how to group it? Currently we only have strings separated by spaces. Maybe that’s enough, but maybe we can make things clearer!

A few years ago, Harry Roberts talked about class grouping. He grouped the classes in square brackets:

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

<p> The text inside the label explains the meaning of square bracket grouping and the advantages and disadvantages of this method. Square brackets themselves are also technically part of the class name, but the possibility of such conflict is very small.</p> <p> Other grouping methods are also discussed in the article, such as using line breaks to separate class names:</p> <pre class="brush:php;toolbar:false">&lt;div class=&quot;module p-2 utility-class-1 utility-class-2&quot;&gt;&lt;/div&gt;</pre> <p> And combine line breaks and emojis:</p> <pre class="brush:php;toolbar:false">&lt;div class=&quot;module p-2 ? utility-class-1 utility-class-2 ?&quot;&gt;&lt;/div&gt;</pre> <p> Finally, the article also mentioned using <code>data-* attribute for grouping:

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

Although this method is functionally feasible, selectors and APIs are not as convenient as classList .

At the end of the article, I asked the readers whether there are other clever methods for grouping class names.

The above is the detailed content of Could Grouping HTML Classes Make Them More Readable?. For more information, please follow other related articles on the PHP Chinese website!