HTMLクラスをグループ化すると、より読みやすくなりますか？

HTML要素には複数のクラスがあります。

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

これは完全に正しく機能し、2つのクラスがあります。 CSSでは、両方のクラスが適用されます。

 .module {}
.p-2 {}

 const div = document.queryselector（ "div"）;
console.log（div.classlist.contains（ "module"））; // 真実
console.log（div.classlist.contains（ "P-3"））; // 間違い

しかし、それをグループ化する方法は？現在、スペースで区切られた文字列のみがあります。たぶんそれだけで十分ですが、多分私たちは物事をより明確にすることができます！

数年前、ハリー・ロバーツはクラスのグループ化について話しました。彼はクラスを四角い括弧でグループ化しました：

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

<p>ラベル内のテキストは、四角いブラケットのグループ化の意味と、この方法の利点と欠点を説明しています。スクエアブラケット自体も技術的にはクラス名の一部ですが、そのような競合の可能性は非常に少ないです。</p> <p>他のグループ化方法については、ラインブレークを使用してクラス名を分離するなど、他のグループ化方法も記事で説明しています。</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>ラインブレークと絵文字を組み合わせた：</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>最後に、この記事では、グループ化の<code>data-*属性を使用して言及しました。

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

この方法は機能的に実行可能ですが、セレクターとAPIはclassListほど便利ではありません。

記事の最後に、クラス名をグループ化する他の賢い方法があるかどうかを読者に尋ねました。

以上がHTMLクラスをグループ化すると、より読みやすくなりますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。