【译】Atomic CSS 这么丑陋，为什么雅虎还要用它？Atomic CSS 简称 ACSS。我这个外人一直在推这个设

官网地址

Atomic CSS 简称 ACSS。我这个外人一直在推这个设计理念，而官网确沉寂非常非常非常多年了（2015年就有了）。最近在 github 的通知里，竟然奇迹的收到了官网的动态。

<style>
/* CSS 是构建工具自动生成的 */
.P\(20px\) {
    padding: 20px;
}
.C\(\#fff\) {
    color: #fff;
}
.Bgc\(\#0280ae\.5\) {
    background-color: rgba(2,128,174,.5);
}
</style>

<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum
</div>

粗略的可以理解为以上这种写法就叫 ACSS。本文不对 ACSS 原理做过多介绍，只针官方 Discussions 里面的几个有意思的问题做翻译和个人见解。想了解更多，可以去看看我的其它文章。

Why Atomizer (acss.io) didn't use more readable class names?

Atomic classes looks ugly, why do yahoo use it?

github 地址

首先，因为 ACSS 所有的 CSS 都是构建工具自动生成的。你写一个 ACSS 语法的 class 比如 Bgc(#0280ae.5)，构建工具就会在 className 中动态为你创建对应的样式。之所以要选择这样奇怪的语法，很大一部分是为了覆盖更多的复杂开发场景，以及生成更少的CSS 代码和 HTML 代码，比如：上下文样式、媒体查询、伪类等。

可读性到底意味着什么

What does readable mean anyway?

Declarations	Tailwind CSS	Blowdrycss	Basscss	Tachyons	ACSS
`margin: 1rem`	`.m-4`	`.margin-1rem`	`.m2`	`.ma3`	`.M(1rem)`
`text-align: center`	`.text-center`	`.text-align-center`	`.center`	`.tc`	`.Ta(c)`
`font-weight: 900`	`.font-black`	`.font-weight-900`	`-`	`.fw9`	`.Fw(900)`
`width: 100vw`	`.w-screen`	`.width-100vw`	`-`	`-`	`.W(100vw)`

不同的方案可能有不同的喜好，但是可以很明显的看到，ACSS 和 Blowdrycss 能更好表达类名与其样式相的关联property: value。从这个意义上说，这些类似乎更“可读”。

丑陋的实际上更具有可读性

When "not readable" is actually more readable

Declarations	Tailwind CSS	Blowdrycss	Basscss	Tachyons	ACSS
`margin: -1rem`	`.-m-4`	`.margin-n1rem`	`.mxn2`	`.na3`	`.M(-1rem)`
`font-size: 25px`	`.text-2xl`	`.font-size-25`	`.h2`	`.f3`	`.Fz(25px)`
`width: 50%`	`.w-1/2`	`.width-50p`	`.col-6`	`.w-50`	`.W(50%)`
`line-height: 1.5`	`.leading-normal`	`.line-height-1_5`	`.line-height-4`	`.lh-copy`	`.Lh(1.5)`

在 ACSS中，-来表示负数，单位我们用了更显示的表达(比如px)，% 表示百分比，甚至用.来表示小数点。

可读性 VS 可预测性

Declarations	Tailwind CSS	Blowdrycss	Basscss	Tachyons	ACSS
`text-transform: uppercase`	`.uppercase`	`.text-transform-uppercase`	`.caps`	`.ttu`	`.Tt(u)`
`text-transform: lowercase`	`.lowercase`	`.text-transform-lowercase`	`-`	`.ttl`	`.Tt(l)`
`text-transform: none`	`.normal-case`	`.text-transform-none`	-	`.ttn`	`.Tt(n)`

可读信，并不意味你知道它的意思。比如，.uppercase或.lowercase 你可能很容易知道它的意思，但是，你很难能找到一个可读性的类名来表示 text-transform: none。

在我看来，帮助开发者去理解是一个更好的方法，因为他们只需要学习一套命名规则而不是去记住一堆的新类名。

换句话说，我认为应该有一种机制(即严格的“语法”)，能够自己基于这套机制构造出 Class 就像 ACSS/Blowdrycss 一样，而不是学习一大堆任意的名称 (例如.float-right、.right、.fr等)。

译者

目前 github 最有名的 CSS 解决方案是 Tailwind CSS。

简单的说 Tailwind CSS 你要记住的是一堆更具有语义化的 class 类库。

而 ACSS 你只需要记住一套命名规则，并且基于这个规则你也可以创建同类型的样式。

当然我同样也有点想吐槽 ACSS 的这套规则有一丢丢的奇怪（估计就是它很难火起来的原因）。

就是一会儿大写一会小写的很奇怪，那个中括号也是怪怪的。感觉全部用小写，然后用 : 分割属性名和属性值会更好。类似：

<style>
    .w\:50\%{
        width: 50%;
    }
    .c\:red{
        color: red;
    }
</style>
<div class="w:50% c:red">
    Hello world
</div>

译者方案

SACSS: Static Atomic CSS