关于原子属性 (Atomic Props)

什么是原子属性?#

受到 Atomic CSSTailwindcss的启发,Fower 使用原子属性(Atomic props)来编写样式。那什么是原子属性呢?我想你肯定见过 CSS 原子类,它们长成这样的: .p-2.m-10.bgBlackflex... 原子属性和 CSS 很相似,只不过它不是写在 className 中,而是直接写在 Markup 中。

原子属性可以写在 HTML 中:

<div bgRed300 text3XL>  Fower</div>

也可以写在自定义组件中:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

简单说,原子属性是作用 UI Markup 中拥有单一样式功能样式单元

和 CSS 原子类有什么不同?#

上面说了,原子属性和原子类非常类似,它们有什么不同呢?我觉的最大不同是: 原子属性是动态的,原子类是静态的。

我们以 padding 为例,它的 CSS 原子类可以有 .p-1.p-2p-4p-5... 它是枚举,是有限的,有多少个原子类,相应地就需重复写多少份 CSS 代码。况且通常还需支持 ptprpbplpxpy,这时 CSS 代码需要翻几倍。如果原子类要支持 hover:p-10focus:p-10active:p-10visited:p-10等伪类,CSS 又要翻几倍。如果还要支持原子级的响应式样式,类似 sm:p-10md:p-10lg:p-10、、xl:p-10,CSS 代码又需要翻几倍。由于 CSS 原子类是静态的,它的 CSS 代码很容易膨胀,一个 padding 的原子类,就需要上千行代码。

如果使用 Fower,padding 的原子属性p-${size}pt-${size}pr-${size}pb-${size}pl-${size} 中 {size},可以无限制取值。由于 JS 非常灵活,实际上实现 padding 的原子属性,代码量是非常少的。

和内联样式有什么不同?#

  • 代码更简洁,使用内联样式代码量更大,很容易让 JSX 变得乱糟糟,但使用 "Atomic props" 保留了 JSX 的简洁性,可读性更好。

  • 样式复用,使用内联样式,很容易让代码快速膨胀,使用 "Atomic props",代码大小并不会随着项目的大小膨胀太多。

为什么使用原子属性?#

  • 局部样式

    传统的 CSS 类是全局的,很容易出现样式互相影响的问题,特别多人合作开发的时候。Fower 使用原子属性编写样式,样子属性最终生成唯一的原子类名,样式只作用当前的 HTML 元素(markup)。

  • 子集化

    CSS 构建 UI 富有表现力,但是属性太过于庞大和冗余,人的记忆是有限的,一个富有表现力又好用的布局库,你只需要 CSS 子集,挑选 CSS 的精华部分,而不是把 CSS 属性全部原子化。 当你去探究 CSS 发展的历史时,很显然,正确使用 CSS 的方式就是要选择一种合理的子集。