分組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> <p>文章中還探討了其他分組方法，例如使用換行符分隔類名：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登入後複製</div></div> <p>以及結合換行符和表情符號：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登入後複製</div></div> <p>最後，文章還提到了使用<code>data-*屬性進行分組：

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

這種方法雖然功能上可行，但選擇器和API 使用起來不如classList方便。

文章最後向讀者提問，是否有其他巧妙的類名分組方法。

以上是分組HTML課程可以使它們更可讀嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！