前言

Acss 层是对样式的极限复用，可以说是 components 的简化版。当然 Acss 层是有缺点的，他的缺点就是无法语义化，但是我们可以通过属性选择器弥补这个缺点。

还有 settings 层和 Acss 有什么必然联系吗？且听我娓娓道来。

Acss 层与 Components 层

当我们需要用到布局组件的时候，我们可以用到 Components 层，但是我们不需要布局组件的时候，又想用到布局样式的时候，就可以用到 Acss 层。

Acss 层实现

Acss 层是很好实现的，如下我们在 Acss 文件声明两个类，

.fl {    float: left;}.fr {    float: right;}

在一个页面中，我们想用相应的语法，只需在 html 节点添加相应的类就可以，可以说是对样式的极限复用了。如下

<div class="fl"></div>

Acss 层缺点

我们可以发现如上写，class 完全是没有语义化的。这是我们就可以通过属性选择器的形式和 class 分离开来。

// HTML<div fl></div>
// CSS
[fl] {    float: left;}[fr] {    float: right;}

当然这种写法也比较特别，就看你的团队是否可以接受与否了，见仁见智。

Settings 层和 Acss 层

回顾之前说的 Settings 层。我们是把一些公共的颜色，边距，字体大小等抽里出来。那相应的，我们是不是可以把相应的写法放入 Acss 层里呢？答案是肯定的。

[color333] {    color: #333;}[fz12] {    font-size: 12px;}

今天就这里了，goodbye！！！