為什么我會在HTML和CSS中的屬性上使用類？

Question

我正在創建一個Web應用程序，需要確定一種一致的方式來設置我的元素的樣式。 我注意到有很多在線幫助使用類，但是我通常使用屬性（例如查詢選擇器[my-attr]）來設置多個元素的樣式，因為我不必使用classList，並且可以非常輕松地刪除和設置屬性。

不使用外部庫，人們為什么要使用類來根據屬性設置元素樣式？ 似乎屬性可以完成類可以做的所有事情，但是效果更好，因為您還可以為屬性分配值。 我也從未見過任何關於性能差異的討論，這使我相信屬性應該比樣式頁面上的教程更受贊賞。

即使參數是主觀的並且歸結為某種偏好，對類在某些方面比屬性可以做得更好的實例的任何想法也將受到贊賞。

謝謝！

同樣，這適用於原始javascript，HTML和CSS。 我知道jQuery之類的庫可能會使使用類變得更加容易，但是我不打算使用任何庫。

Answer 1

說實話，這是更一致的，畢竟是一切。 如果您想使用屬性，那就去做吧。 但是，這給以后需要幫助的人增加了很多困難。 CSS類設計用於通用樣式的分組選擇和應用。 CSS 恰好也能夠選擇屬性，因為在某些情況下它確實有意義。

通常，應該為任何非樣式相關的屬性保留屬性，這些屬性會為其他用途添加值，無論是屏幕閱讀器還是JavaScript的變量容器，例如data-id="34"可以讓您使用ID參數。

考慮這個例子，它有一些簡單的基於“類”的按鈕：

 .button { display: inline-block; border: 1px solid; padding: 4px 10px; text-decoration: none; margin-bottom: 4px; } .primary { background: currentColor; } .primary span { color: #fff; } .blue { color: #0095ee; } .red { color: #ee3300 } 

 <a href="#" class="button red">Red Button</a> <a href="#" class="button red primary"><span>Red Button</span></a> <br /> <a href="#" class="button blue">Blue Button</a> <a href="#" class="button blue primary"><span>Blue Button</span></a> 

為了使用屬性復制類似的內容，我們將使用一些令人討厭且相當隨意的屬性名稱來進行類似的操作。 這樣做實際上使我搞砸了，因為在一種情況下，我使用了錯誤的屬性名稱和值對。

 [type="button"] { display: inline-block; border: 1px solid; padding: 4px 10px; text-decoration: none; margin-bottom: 4px; } [status="primary"] { background: currentColor; } [status="primary"] span { color: #fff; } [color="blue"] { color: #0095ee; } [color="red"] { color: #ee3300 } 

 <a href="#" type="button" color="red">Red Button</a> <a href="#" type="button" color="red" status="primary"><span>Red Button</span></a> <br /> <a href="#" type="button" color="blue">Blue Button</a> <a href="#" type="button" color="blue" status="primary"><span>Blue Button</span></a> 

將所有樣式和組目標屬性保留在class屬性中是否沒有更多的語義意義？ 我的意思是，這就是它的設計目的。 我想您可以刪除參數值並僅使用參數名稱，但是考慮到class本身就是Global Attribute ，您確實在破壞屬性的目的。

這也是一個JavaScript示例：

 let classes = document.getElementsByClassName('button'); for( i = 0, n = classes.length; i < n; ++i ){ classes[i].style.background = 'red'; } let attrs = document.querySelectorAll('[button]'); for( i = 0, n = attrs.length; i < n; ++i ){ attrs[i].style.background = 'blue'; } 

 a { padding: 10px; margin-bottom: 4px; display: inline-block; text-decoration: none; color: #fff; } 

 <a href="#" button>Attr 1</a> <a href="#" button>Attr 2</a> <a href="#" button>Attr 3</a> <br /> <a href="#" class="button">Class 1</a> <a href="#" class="button">Class 2</a> <a href="#" class="button">Class 3</a> 

撇開JS與基於類（和id）的選擇器功能進行大量集成這一事實相比，您必須對屬性按鈕使用querySelector和querySelectorAll 。

雖然天生不是一件壞事，（老實說，我更喜歡使用querySelector不是getElement(s)By… ），但是當您查看它時， querySelectorAll('[button]')讀起來並不好，幾乎就像我在瞄准<button>元素。 從語義上講，它比以下內容更難閱讀：

getElementsByClassName('button') -清楚地獲取所有具有按鈕類的元素，甚至

querySelectorAll('.button') -自. 通常被理解為“類”選擇器，並且使用HTML，CSS和JS的每個人都在任何Web開發程序/教程的第一天就學到了這一點。 因此，您需要刪除項目中的一些基本內容，從而在項目中花了些力氣。

我確定您已經聽過“僅僅因為您可以，並不意味着您應該”這句話。 -我認為這在這里非常適用。 我的意思是，我們實際上曾經使用過<font color="red">Red</font> ，因此我們放棄了它，因為在單個全局屬性中將樣式分組更有意義。 沒有什么可以阻止您的，但是我認為這比為任意參數名稱刪除類要值得的麻煩更多，更不用說您是否遇到問題並發布代碼以尋求幫助，第一個響應始終是“您為什么這樣做那，您使用什么預處理器？”

Answer 2

我認為這只是功能上的問題，如果您想給樣式使用應該使用的類，但是如果您要修改u可以使用查詢選擇器，因為它不會在html上添加內聯樣式，並且可以縮小腳本。