AMCSS如何借助HTML属性来进行CSS属性相关开发

小编给大家分享一下AMCSS如何借助HTML属性来进行CSS属性相关开发，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

在中卫等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站设计、做网站网站设计制作按需定制设计,公司网站建设,企业网站建设,成都品牌网站建设,成都营销网站建设,成都外贸网站制作,中卫网站建设费用合理。

一、AMCSS简介

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官网

AMCSS有专门的介绍网站：http://amcss.github.io/

其中，有对AMCSS的优点进行说明：每个属性有效地声明一个单独的命名空间，用于封装样式信息，从而产生更易于阅读和维护的HTML和CSS。

二、我对AMCSS的看法

值得借鉴，但没必要大规模使用，毕竟属性选择器的性能和类名相比差别很大，过度使用可能会产生可感知的性能问题。

但是价值还是很可取的，关键要看使用场景，通常我们静态的组件开发，我建议还是使用类名串联，因为大家都习惯，同事也习惯。但是，有时候，AMCSS这套基于属性选择器开发的思路还是很有用的。

例如，我们经常需要在DOM元素上存储数据，例如放在data-store属性中，此时，配合AMCSS，我们可以非常高效进行不同数据不同样式的控制。

另外，无障碍访问中的aria-*本质上也都是通过属性控制，现代Web Components的UI控制也是基于HTML属性，因此，AMCSS是有生命力有市场的，但是，并不是作为主力出现。

看完了这篇文章，相信你对“AMCSS如何借助HTML属性来进行CSS属性相关开发”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

网站标题：AMCSS如何借助HTML属性来进行CSS属性相关开发
本文网址：http://lszwz.com/article/ieohes.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉，无效全额退款

乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。

友情链接交换友情链接

广安网站建设南充护栏钻孔机成都网站制作企业网站设计成都小程序成都包装盒设计网络推广外包公司网站建设 app软件定制开发解决方案

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室 All Rights Reserved 蜀ICP备2021004003号-25

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室

蜀ICP备2021004003号-25