Appearance
AMCSS 开发模式简介
AMCSS 的介绍
它是 Attribute Modules for CSS 的缩写，表示借助 HTML 属性来进行 CSS 相关开发；
AMCSS 的官网：
AMCSS有专门的介绍网站: http://amcss.github.io/
优点：
- 每个属性有效地声明一个单独的命名空间，用于封装样式信息，从而产生更易于阅读和维护的 HTML 和 CSS;
传统类名写法：
html
<div class="button button-large button-blue"> Button</div>
1
目前主流类名选择器：通过多个类名进行控制
- .button
- .button-large
- .button-blue
AMCSSE 写法
html
<div button="large blue">Button</div>
<div am-button="large blue">Button</div>
<!-- （避免属性，属性名冲突） -->
1
2
3
2
3
AMCSS 则是基于属性控制
[am-button] {...} [am-button~="large"] {...} [am-button~="blue"]
案例一：Bootstrap Buttons
Large primary button
html
<a class="btn btn-primary btn-lg">Large primary button</a>
<a am-Button="primary large">Large primary button</a>
1
2
2
Default button
html
<a class="btn btn-default"> Default button</a>
<a am-Button>Default button</a>`
1
2
2
Small info button
html
<a class="btn btn-info btn-sm"> Small info button</a>
<a am-Button="info small"> Small info button</a>
1
2
2
Extra-small danger button
html
<a class="btn btn-danger btn-xs">Extra-small danger button</a>
<a am-Button="danger extra-small"> Extra-small danger button</a>
1
2
2
传统样式写法：
css
.btn{ /* Default button styles */ }
.btn-primary{ /* Primary colours */ }
.btn-largef{/* Large sizing */}
1
2
3
2
3
AMCSS 样式写法：
css
[am-Button] { /* Default button styles */ }
[am-Button~="primary"] { /* Primary colours */}
[am-Button~="large"]{/* Large sizing */}
1
2
3
2
3
案例二：Flexbox Grid
传统写法：
html
<div class="row reverse">
<div class="column-12--hand column-8--lap">
<div class="box">Responsive</div>
</div>
</div>
1
2
3
4
5
2
3
4
5
AMCSS 样式写法：
html
<div am-Grid-Row ="reverse">
<div am-Grid-Col="12 lap:8">
<div am-Demo="box">Responsive</div>
</div>
</div>
1
2
3
4
5
2
3
4
5
张鑫旭对 AMCSS 的看法
值得借鉴，但没必要大规模使用，毕竟属性选择器的性能和类名相比差别很大，过度使用可能会产生可感知的性能问题。
但是价值还是很可取的，关键要看使用场景，通常我们静态的组件开发，我建议还是使用类名串联，因为大家都习惯，同事也习惯。但是，有时候，AMCSS 这套基于属性选择器开发的思路还是很有用的。
例如，我们经常需要在 DOM 元素上存储数据，例如放在 data-store 属性中，此时，配合 AMCSS，我们可以非常高效进行不同数据不同样式的控制。
另外，无障碍访问中的 aria-*本质上也都是通过属性控制，现代 Web Components 的 UI 控制也是基于 HTML 属性，因此，AMCSS 是有生命力有市场的，但是，并不是作为主力出现。