Basic

理解原子属性 (Atomic props)#

Fower 使用Atomic Props让样式原子化。 数十年来,前端开发的最佳实践是将 HTML,CSS 和 JS 分离,但是随着组件化时代的到来,我们应该重新思考什么是最佳实践。

Fower 不提倡“关注点分离”,Fower 使用“原子性道具”来编写样式。 当我们使用 Fower 时,没有 CSS 代码,没有 CSS 类名,没有 CSS 文件。

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

初看 toCenterY p-20 w-300 bgWhite rounded-10 这类缩写,你可能很不习惯,有点简单粗暴,但我保证,它会让你爽。

Atomc props 的优点#

  • 更少的代码,这能直接感观到,上面传统语义化方式的代码行数 40,字符个数为 847,Fower 方式代码行数 9,字符个数为 232,代码量相差巨大,更少的代码带来更高的开发效率,实际上,使用 Fower,每一个字符都是有意义的,没有任何冗余的字符和符号。

  • 不用在浪费时间取名字,给 CSS 类取名非常烦人且浪费精力,每个人取名习惯不一样,很多场景也很难用一个语义化的名字来描述,Fower 不浪费时间做这些事,取而代之的是通过添加属性声明式的创建样式。

  • 结构和样式变得内聚,传统的方式,你给一个元素创建样式,你需要先创建一个中间人(CSS class name),然后复制类名到 CSS 文件中开始写样式,这个过程你要经历 "想名字->模板中编写类名->复制类名到 CSS 文件->开始写 CSS 代码" 这样的烦人链路,同时还要在结构和样式两处文件频繁跳来跳去,修改样式也是一样,这极大影响了开发效率和开发心情。Fower 没有这些问题,你要设置样式,直接设置原子 Props 即可。

  • CSS 停止膨胀,使用传统的方式,随着项目增大,CSS 会逐渐膨胀,最终应用体积变得越来越大,越来越难维护,使用 Fower,样式代码几乎不会膨胀。

基本用法#

为了让您更深入地了解 Fower 的用法,让我们回顾一下基本用法:

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

Fower 最简单的用法是直接在 Fower 组件设置一些原子属性,上面 text2XL fontBold green50 会生产下面的样式:

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

上面的 Props text2XL fontBold green50 不需要声明 value,我们称之为 "Key as Value" 模式,这让 UI 代码更简洁,提高了开发体验。个人认为,JSX 内联样式本身已经很不错,有强类型,方便做动态样式,最大缺点是繁琐啰嗦和视觉上的干扰,没人喜欢 style={{}} 这样丑陋的样板代码,而 Fower 解决了这些问题,使用 Fower,每个字符都是有意义的,没有多余的等号、花括号、引号等无用的字符,保持了 JSX 结构的简洁。

使用属性值#

大部分情况,我们建议使用"Key as Value" 模式来设置样式,但有些场景我们需要通过设置属性值来编写样式:

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

传值模式损失了一部分简洁性,但是更加灵活,特别适合用在动态样式场景。