对比

CSS Framework#

例如 Bootstrap、Bulma、Foundation、Semantic UI、PureCSS、Materialize 这些,我称之为传统 CSS 框架吧,通常这些框架用于快速开发 Web 应用,在 JQuery 时代比较流行。缺点也很明显,如果你的界面有非常多的定制设计,用起来往往会越来越痛苦。Fower 跟 CSS Framework 不会同一类东西。

UI Framework#

例如 Ant-design、Material-UI、Vuetify、React-Bootstrap 这些,这些 UI Framework 是伴随着组件化时代发展起来的,往往和一些前端框架 (React, Vue, Angular) 关联。同样,Fower 跟 CSS Framework 不会同一类东西。

BEM/SMACSS/OOCSS 等#

一些编写 CSS 的方法论,懂的人自然懂。我们通常称他们为传统的 CSS,他们在“结构和样式分离”原则里做文章,这也是 Fower 和他们最大的不同,Fower 不主张 “结构和样式分离”。

CSS in JS#

CSS in JS 是 React 社区发展起来的,它是什么?简单的说就是用 JS 去写 CSS。流行的解决方案有 Styled Components,Emotion,JSS,Radium 等。Fower 也是 CSS in JS 方案的一种,有什么不同呢?不同是 Fower 使用 ”Atomic props“ 方式编写,理念类似 ”Atomic CSS“。

Atomic CSS、Tailwindcss、Tachyons#

使用原子类的 CSS,这也是一种非传统的 CSS 方案,也是个人非常认同的一种理念,Fower 也使用了这一理念。但不同的是,它们是写 CSS,而 Fower 是在写 JS/TS。

实际上,你可以把 Fower 理解为 "Atomic CSS" + "CSS in JS",我称之为 "Atomic Props"。