AMCSS如何借助HTML屬性來進行CSS屬性相關(guān)開發(fā)

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

一、AMCSS簡介

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

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

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

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

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

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

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

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

此技術(shù)能夠?qū)嵭须x不開這個一個選擇器：[attr~=”val”]。這個選擇器多年前在“了不起的IE7瀏覽器-CSS新特性-實現(xiàn)與思維變革”這篇文章中就有介紹。

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

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

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

可以轉(zhuǎn)換成：

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

AMCSS官網(wǎng)

AMCSS有專門的介紹網(wǎng)站：http://amcss.github.io/

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

二、我對AMCSS的看法

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

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

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

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

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