AMCSS如何借助HTML屬性來進行CSS屬性相關開發

小編給大家分享一下AMCSS如何借助HTML屬性來進行CSS屬性相關開發，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

一、AMCSS簡介

AMCSS是Attribute Modules for CSS的縮寫，表示借助HTML屬性來進行CSS相關開發。

傳統我們多個模塊特性是通過多個類名進行控制的，典型如下：

<div class="button button-large button-blue">Button</div>

例如，weui中的按鈕，或者針對用戶側PC產品的LuLu UI中的按鈕，均是采用這種方式。

而AMCSS則是基于屬性控制，例如：

<div button="large blue">Button</div>

為了避免屬性名稱沖突，我們可以加一個統一的前綴，例如am-，于是有：

<div am-button="large blue">Button</div>

此技術能夠實行離不開這個一個選擇器：[attr~=”val”]。這個選擇器多年前在“了不起的IE7瀏覽器-CSS新特性-實現與思維變革”這篇文章中就有介紹。

[attr~="val"]可以看出是屬性值中的單詞匹配，CSS選擇器這東西是老外弄出來的，老外的的母語是English, English的句子都是一個單詞+空格+一個單詞實現的，所以彎彎等于（~=）屬性選擇器的效果就有class類名選擇器很近似，基于空格區分。

因此，目前主流類名選擇器：

.button {...}
.button-large {...}
.button-blue {...}

可以轉換成：

[am-button] {...}
[am-button~="large"] {...}
[am-button~="blue"] {...}

AMCSS官網

AMCSS有專門的介紹網站：http://amcss.github.io/

其中，有對AMCSS的優點進行說明：每個屬性有效地聲明一個單獨的命名空間，用于封裝樣式信息，從而產生更易于閱讀和維護的HTML和CSS。

二、我對AMCSS的看法

值得借鑒，但沒必要大規模使用，畢竟屬性選擇器的性能和類名相比差別很大，過度使用可能會產生可感知的性能問題。

但是價值還是很可取的，關鍵要看使用場景，通常我們靜態的組件開發，我建議還是使用類名串聯，因為大家都習慣，同事也習慣。但是，有時候，AMCSS這套基于屬性選擇器開發的思路還是很有用的。

例如，我們經常需要在DOM元素上存儲數據，例如放在data-store屬性中，此時，配合AMCSS，我們可以非常高效進行不同數據不同樣式的控制。

另外，無障礙訪問中的aria-*本質上也都是通過屬性控制，現代Web Components的UI控制也是基于HTML屬性，因此，AMCSS是有生命力有市場的，但是，并不是作為主力出現。

看完了這篇文章，相信你對“AMCSS如何借助HTML屬性來進行CSS屬性相關開發”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！