CSS架构之Acss层

313 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

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!!!