一起,我们将根据总积累的GitHub明星来评估前15个CSS-in-JS图书馆,我们将比较它们的特性、优势和弱点,包括一些真正的新图书馆,如情绪,以及一些原始图书馆,如阿弗罗迪特。
如果你像我一样,你花了一段时间才能登上CSS-in-JS列车。如果你不确定这是什么,那么值得一看@vjeux的原始React: CSS in JS幻灯片。快速前进近三年,今天没有缺乏CSS-in-JS图书馆来帮助我们使用JavaScript来设计我们的React组件。事实上,在写作时,有55个这样的图书馆列在@MicheleBertoli的css-in-js复制片上,这是一个巨大的集中列表图书馆,有个别的例子如何在每个图书馆中设计一个基本按钮。非常有用!
大约每六个月,就会出现一个新的图书馆,这种变化速度非常令人鼓舞!每一种新方法都建立在以前的图书馆的优势之上,并在一些较新的图书馆的缺点上进行创新。虽然一些较新的图书馆提供了更多的功能和性能,但对于一些较旧的图书馆的寿命仍有话要说,这就是为什么它们也被纳入其中。在决定在下一个项目中使用哪些图书馆时,请记住这一点。
<$>[注]为了简要性,我们将把它放在这里,不包括任何代码样本. 如果您想看到每个库是如何使用的,请查看每个项目的GitHub链接阅读其完整描述。
情感
情绪是区块上的新孩子,但对于其年龄来说,它不仅提供了一系列令人印象深刻的功能,而且似乎也在极快地获得拉力。它是伟大的开发者体验的甜点,也是对性能的痴迷。
- 年龄: 3 个月
- 明星: 1.5k ⭐
- Github: https://github.com/tkh44/emotion
- 标签:
下一代的 CSS-in-JS。 Emotion 是一个高性能,轻量级的 CSS-in-JS 库。 Emotion 通过在运行时而不是在运行时使用 PostCSS 对您的风格进行分析,极大地降低了 css-in-js 的运行时间成本。 - 功能:动画,动态支持,媒体查询,嵌入选项,伪选项,服务器侧渲染,任何风格组件,主题
格拉美
Glamorous包裹着流行的Glamor库,提供一种类似于styled-component的体验,但使用JavaScript语法而不是插入的字符串。
- 年龄: 6 个月
- 明星: 2k ⭐⭐
- Github: https://github.com/paypal/glamorous
- 标签: 可维护的 CSS 与 React
- 功能: 动态 Props, 媒体查询, React Native, 服务器侧渲染, 风格 任何组件, 主题
《JX》
styled-jsx 允许您在您的 Components 渲染函数中添加<style jsx /> 标签. 这允许您在简单的 CSS 中写样式,其中增加了 CSS 仅适用于在该级别渲染的 DOM 的当前范围。
- 年龄: 9 个月
- 明星: 2k ⭐⭐
- Github: https://github.com/zeit/styled-jsx
- 标签: JSX 的完整,范围和组件友好的 CSS 支持(在服务器上或客户端上渲染)。
- 功能:动画,动态优惠,服务器侧渲染,主题
JS型
jsxstyle允许你忘记思考你仅仅用于造型目的的HTML元素(例如,div />,<span />,<table />,等等),而不是使用这些造型组件(<Block />,<Flex />,<Inline />,<Table />,等等)。
- 年龄: 9 个月
- 明星: 1.5k ⭐
- Github: https://github.com/smyte/jsxstyle
- 标签: jsxstyle 旨在成为最佳的方式来设计 React 组件。它有目标拥有最佳的开发人员体验,而不会牺牲性能,并且对现有 CSS 正统 很少关注* 功能: 假选择
类型
「TypeStyle」是CSS的TypeScript - 因此这个名字。重点是编译时间,自动完成等,以确保良好的开发者体验,并防止运行时间问题。最重要的是,它是框架无知,所以你可以一次学习并在任何地方使用它。
- 年龄: 9 个月
- 明星: 1.5k ⭐
- Github: https://github.com/typestyle/typestyle
- 标签:用 TypeStyle 编写 CSS 将与使用 TypeScript 编写 JavaScript 一样流畅
- 功能:动画,媒体查询,假类类,服务器侧渲染
风格组件
远远是最受欢迎的 CSS-in-JS 库,‘styled-components’ 扭转了问题,而不是将风格添加到现有组件中,而是创建组件,这些组件包容这些风格,这允许声明和可重复使用的组件在正常 HTML 元素和完整的 React 组件之间半途径。 这种哲学,以及 GraphQL-esque 字符串交互,需要一些习惯,但鉴于它几乎是第二位的 CSS-in-JS 库的两倍受欢迎,可以肯定地说这里有值得一看的东西。
- 年齡: 1 年
- 明星: 9.5k ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
- Github: https://github.com/styled-components/styled-components
- 標籤:視覺原始的元件年齡。 使用最好的比特的ES6和CSS來造型你的應用程式,沒有壓力
- 功能:動畫,動態促進,媒體查詢,嵌套選擇,伺服器側渲染,反應原生,風格任何元件,主題
魅力
光荣的真正力量在于它允许你编写和组合 CSS 规则的能力. 通常,扩展 / 重写 CSS-in-JS 规则可能是一个麻烦;然而,光荣允许你在 Component 的附件中序列它们,或者列出它们在它的类名称。
- 年齡: 1 年
- 明星: 2.5k ⭐⭐
- Github: https://github.com/threepointone/glamor
- 標籤: inline css for react et al
- 功能: 媒體查詢, 嵌套選擇器, 虛假選擇器, 伺服器側渲染, 反應原生, 風格 任何部件, 主題
风格
styletron的声称是它的速度,源于其使用虚拟CSS(如虚拟DOM)的使用,它抽象了JS到CSS的转换,以提供优化,加速,死CSS切割等。
- 年龄: 1 年
- 明星: 2k ⭐⭐
- Github: https://github.com/rtsao/styletron
- 标签:通用,高性能的JavaScript风格
- 功能:动画,动态优惠,媒体查询,服务器侧渲染,风格任何组件
无线电
「radium」是原来的 CSS-in-JS 库之一,旨在解决处理媒体查询、假选择器和修改器的问题,它仍然是最受欢迎的库之一,这表明其实用性和长寿。
- 年龄: 2 年
- 明星: 5.5k ⭐⭐⭐⭐⭐⭐
- Github: https://github.com/FormidableLabs/radium
- 标签:Radium 是一套工具来管理 React 元素上的内线风格。 它为您提供了强大的风格功能,而无需 CSS
- 功能:动画,媒体查询,伪选,服务器侧渲染,风格任何组件,主题
CSS 模块
「react-css-modules」即将到来,因为它能够在您的 React 组件中写纯 CSS。从字面上讲,您将.css 文件导入,并在「className」 prop 中使用它们的密钥. 作为第一个 CSS-in-JS 库之一,它试图解决的主要问题是针对 CSS 选择器。 值得一看是否 babel-plugin-react-css-modules 会满足您的需求。 尽管它具有更少的功能,但它是一个更小的包,并且更具性能。
- 年龄: 2 年
- 明星: 4k ⭐⭐⭐⭐⭐
- Github: https://github.com/gajus/react-css-modules
- 标签: React CSS 模块实现了 CSS 模块的自动映射。每个 CSS 类被分配给一个本地范围的标识符,具有全球独特的名称。 CSS 模块允许模块化和可重复使用的 CSS!
- 功能:嵌套选择器,假选择器
非洲人
「afrodite」是由哈恩学院的好人撰写和维护的。作为原来的CSS-in-JS库之一,它试图解决的主要问题是获得CSS平等性,但使用JavaScript语法。因此,重点是选择器,媒体查询,动画等。
- 年龄: 2 岁
- 明星: 3.5k ⭐⭐⭐
- Github: https://github.com/Khan/aphrodite
- 标签:框架-agnostic CSS-in-JS 支持服务器侧渲染,浏览器前缀和最小CSS生成
- 功能:动画,动态优惠,媒体查询,服务器侧渲染
反應
作为原来的 CSS-in-JS 库之一,reactcss 专注于基于优惠的动态交换风格. 虽然这是许多较新的库的一个功能,但应该注意到,这是在当天曲线之前的一个功能。
- 年龄: 2 年
- 明星: 1.5k ⭐
- Github: https://github.com/casesandberg/reactcss
- 标签: 支持 React, React Native, Autoprefixing, Hover, Pseudo-Elements & Media Queries
- 功能: 动态优惠, 媒体查询, React Native
👉 非常感谢 @MicheleBertoli 和所有其他贡献者 css-in-js。