Shulou(Shulou.com)06/01 Report--

Editor to share with you how AMCSS uses the HTML attribute to develop CSS attributes. I hope you will get something after reading this article. Let's discuss it together.

A brief introduction to AMCSS

AMCSS is an acronym for Attribute Modules for CSS, which means to use the HTML attribute for CSS-related development.

Traditionally, many of our module features are controlled by multiple class names, typically as follows:

Button

For example, buttons in weui, or buttons in LuLu UI for user-side PC products, use this approach.

AMCSS is based on attribute control, such as:

Button

To avoid attribute name conflicts, we can add a uniform prefix, such as am-, which has:

Button

This technology cannot be implemented without this one selector: [attr~= "val"]. This selector was introduced many years ago in the article "the Great IE7 browser-what's New in CSS-implementation and change in thinking."

[attr~= "val"] you can see that it is the word matching in the attribute value. The CSS selector is made by foreigners. The native language of the foreigner is English, and the sentences of English are realized by a word + space + a word, so the effect of the bend equal to (~ =) attribute selector is similar to the class name selector, which is based on space distinction.

Therefore, the current mainstream class name selector:

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

Can be converted to:

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

AMCSS has a special introduction website: http://amcss.github.io/

Among them, there is an explanation of the advantages of AMCSS: each attribute effectively declares a separate namespace that encapsulates style information, resulting in HTML and CSS that are easier to read and maintain.

Second, my views on AMCSS

It is worth learning, but there is no need to use it on a large scale. After all, the performance of property selectors is very different from that of class names, and overuse may cause perceptible performance problems.

But the value is still very desirable, the key depends on the use scenario, usually our static component development, I suggest using class name concatenation, because everyone is used to it, colleagues are also used to it. Sometimes, however, the idea of AMCSS based on attribute selector development can be useful.

For example, we often need to store data on DOM elements, such as in data-store attributes, at this time, with AMCSS, we can control different data in different styles very efficiently.

In addition, the aria-* in barrier-free access is essentially controlled by attributes, and the UI control of modern Web Components is also based on HTML attributes, so AMCSS has vitality and market, but it does not appear as the main force.

After reading this article, I believe you have a certain understanding of "how AMCSS uses HTML attributes to develop CSS attributes". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.