AMCSS(CSS属性模式)开发简介

这篇文章发布于 2018年03月25日,星期日,22:56,归类于 CSS相关。 阅读 20419 次, 今日 1 次 9 条评论

 

AMCSS占位图

一、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”]。这个选择器在“简单聊聊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是有生命力有市场的,但是,并不是作为主力出现。

好,短篇一则,感谢阅读,欢迎交流!

参考文章:https://css-tricks.com/methods-organize-css/

(本篇完)

分享到:


发表评论(目前9 条评论)

  1. RS说道:

    一个关于 CSS 作用范围等等的隔离控制方面的操作…
    不过,很多(居然已经)为此困扰的外国人改用 CSS in JS 了。比如 CSSNext 的原开发者: https://moox.io/blog/farewell-css/
    (但他们到底在做什么呢?打开这个博客,按下 F12,就明朗了。看了没懂的话,试想如果有人想给他的博客写用户样式 UserCSS 或者别的什么的东西… 充斥查看器的混淆类名简直将这样的网站闭源保护了起来。如果做到用户每次刷新时类名跟着改变,这可比尚可轻易解开的 WebPack 更加恶劣无数倍。实在难以想象他们部分违背 Web 的开放精神只为躲开他们眼中 CSS 的一些缺陷。)

  2. btdk说道:

    属性来关联样式在某些场合我觉得比class串联更好用,比如button尺寸,我们如果写个基类button,然后实现不同的size,使用class=”button button-small button-big”,而且遇上常用的显隐操作还要放class=”hide”之类的,会让结果class变得更长,操作和可读性都不是非常的好,如果这时候用,就显得舒服多了,或者用来定义按钮的样式,例如 type=”ghost”,type=”round”之类的,也是很直观、一目了然。虽然多写了几个属性,却实现了很清晰的分类。

    • btdk说道:

      有些评论内容被解析掉了。。。。。用中文引号补上被解析掉的内容:用 size=“small”,size=“big”之类的代替尺寸

  3. 王宏亮说道:

    Vue使用 AMCSS 来实现不同组件之间css作用域的控制

  4. Web前端之家说道:

    AMCSS什么鬼啊,第一次听说,学习了。

  5. zach说道:

    大概会产生什么样的性能问题呢?可否赐教?

  6. distums说道:

    “属性选择器的性能和类名相比差别很大,过度使用可能会产生可感知的性能问题” —》做个插件呢,写的时候是AMCSS,最终编译成类名串联呢?