从品牌网站建设到网络营销策划,从策略到执行的一站式服务
小编给大家分享一下AMCSS如何借助HTML属性来进行CSS属性相关开发,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
在中卫等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、做网站 网站设计制作按需定制设计,公司网站建设,企业网站建设,成都品牌网站建设,成都营销网站建设,成都外贸网站制作,中卫网站建设费用合理。
AMCSS是Attribute Modules for CSS的缩写,表示借助HTML属性来进行CSS相关开发。
传统我们多个模块特性是通过多个类名进行控制的,典型如下:
Button
例如,weui中的按钮,或者针对用户侧PC产品的LuLu UI中的按钮,均是采用这种方式。
而AMCSS则是基于属性控制,例如:
Button
为了避免属性名称冲突,我们可以加一个统一的前缀,例如am-
,于是有:
Button
此技术能够实行离不开这个一个选择器:[attr~=”val”]。这个选择器多年前在“了不起的IE7浏览器-CSS新特性-实现与思维变革”这篇文章中就有介绍。
[attr~="val"]
可以看出是属性值中的单词匹配,CSS选择器这东西是老外弄出来的,老外的的母语是English, English的句子都是一个单词+空格+一个单词实现的,所以弯弯等于(~=
)属性选择器的效果就有class类名选择器很近似,基于空格区分。
因此,目前主流类名选择器:
.button {...} .button-large {...} .button-blue {...}
可以转换成:
[am-button] {...} [am-button~="large"] {...} [am-button~="blue"] {...}
AMCSS有专门的介绍网站:http://amcss.github.io/
其中,有对AMCSS的优点进行说明:每个属性有效地声明一个单独的命名空间,用于封装样式信息,从而产生更易于阅读和维护的HTML和CSS。
值得借鉴,但没必要大规模使用,毕竟属性选择器的性能和类名相比差别很大,过度使用可能会产生可感知的性能问题。
但是价值还是很可取的,关键要看使用场景,通常我们静态的组件开发,我建议还是使用类名串联,因为大家都习惯,同事也习惯。但是,有时候,AMCSS这套基于属性选择器开发的思路还是很有用的。
例如,我们经常需要在DOM元素上存储数据,例如放在data-store
属性中,此时,配合AMCSS,我们可以非常高效进行不同数据不同样式的控制。
另外,无障碍访问中的aria-*
本质上也都是通过属性控制,现代Web Components的UI控制也是基于HTML属性,因此,AMCSS是有生命力有市场的,但是,并不是作为主力出现。
看完了这篇文章,相信你对“AMCSS如何借助HTML属性来进行CSS属性相关开发”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图