使用屬性選擇器的響應式樣式

基於類名的原子化樣式的一個挑戰在於，它通常依賴於特定斷點來確定上下文。

<div></div>
<div></div>
<div></div>

通常使用前綴來定位每個斷點：

<div></div>

這在添加多個類之前效果很好。但是當我們開始添加多個類時，就很難追踪哪些類與哪些斷點相關，以及在哪裡添加、刪除或更改內容。

<div>
</div>

我們可以嘗試通過重新分組來提高可讀性：

<div>
</div>

我們還可以添加一些特殊的分割符（無效的類名將被忽略）：

<div>
</div>

但這仍然感覺很混亂，難以理解。

我們可以通過對屬性選擇器進行分組而不是實際的類來獲得更好的概覽並避免實現前綴：

<div data-lg="span-4 font-size-xl font-weight-700" data-md="span-6 font-size-xl font-weight-500" data-sm="span-12 font-size-lg"></div>

這些不是類的集合，而是一組空格分隔的屬性，我們可以使用[attribute~="value"]選擇器來選擇它們，其中~=要求精確的單詞出現在屬性值中才能匹配。

 @media (min-width: 0) {
 [data-sm~="span-1"] { /*...*/ }
 [data-sm~="span-2"] { /*...*/ }
 /* etc. */
}
@media (min-width: 30rem) {
 [data-md~="span-1"] { /*...*/ }
 [data-md~="span-2"] { /*...*/ }
 /* etc. */
}
@media (min-width: 60rem) {
 [data-lg~="span-1"] { /*...*/ }
 [data-lg~="span-2"] { /*...*/ }
 /* etc. */
}

這可能看起來有點奇怪，但我認為將原子類轉換為屬性相當簡單（例如， .sm-span-1轉換為[data-sm~="span-1"] ）。此外，屬性選擇器的特異性與類相同，因此我們不會損失任何東西。而且，與類不同，屬性可以在不轉義特殊字符（如/ .:? ）的情況下編寫。

就是這樣！再次強調，這只是一個想法，旨在使在媒體查詢中切換聲明更容易編寫、閱讀和管理。這絕對不是要取消類或類似內容的建議。

以上是使用屬性選擇器的響應式樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！