原子 CSS 的坑:简写属性

最后更新于
Ref:
The Shorthand-Longhand Problem in Atomic CSS

我们都知道,同等级的 css class 应用顺序仅取决于其定义顺序,例如:

<p class="red green">I'm green.</p>
<p class="green red">I'm green.</p>

简写属性 也不例外:

<p class="pa-5 pl-20">I'm pa-5.</p>
<p class="pl-20 pa-5">I'm pa-5.</p>

如果单纯看 class 内容,pl-5 pl-20 可能给人一种 pl-20 会生效的错觉。