Skip to content

Latest commit

 

History

History
128 lines (102 loc) · 8.2 KB

README-ZH_CN.md

File metadata and controls

128 lines (102 loc) · 8.2 KB
Raw

CSS in JS 相关类库

Awesome Build Status

一个关于CSS in JS方法的很棒的集合

目录

库

  • fela - 通用的、动态的、高性能的JavaScript样式
  • styled-jss - 在JSS上有样式的组件
  • react-jss - 在react中集成jss
  • jss - JSS是一种CSS创作工具，它使用JavaScript作为宿主语言
  • rockey - 使用js的组件的Stressless CS. 编写基于组件的CSS和功能混合.
  • styled-components - 通用的、动态的、高性能的JavaScript样式
  • aphrodite - 它是内联样式，但他们工作!还支持通过CSS样式化
  • csx - ϟ 一个cssin - js解决方案，用于功能性UI组件的功能性CSS
  • styled-jsx - 完整的CSS对JSX的支持
  • glam - 在你的js中使用疯狂的css
  • glamor - 在你的js中使用css
  • glamorous - 通过优雅的API、小的足迹和出色的性能(通过glamor)来解决组件样式的问题
  • styletron - ⚡️ 通用、高性能JavaScript风格
  • radium - 在react元素上用于管理内联样式的工具集
  • aesthetic - Aesthetic是用于样式组件的强大的react库，无论是使用对象的cssin - js，导入样式表，还是仅仅引用外部类名。
  • j2c - CSS在JS库中，小巧而又有特点

注释表还没有完成。如果有bug或需要添加另一个库，请建议PR。

如何阅读表格:

As Object - 当使用对象声明CSS时。

{
  color: 'red',
}

As TL - 当使用模板文本声明CSS时。

`
  color: red;
`

SSR - 服务端渲染。

RN Support - React Native支持。

Agnostic - 框架不可知的。 意味着这个库可以用于任何框架。

Dynamic - 当可以编写依赖于运行时值的CSS时，就像组件道具一样。

{
  color: props =>  props.color
}
props => ({
  color: props.color
})
`
  color: ${props => props.color}
`

Babel plugins - 如果有任何用于性能优化的babel插件。

Bindings - 如果有为另一个框架或库提供绑定的包。

Package As Object As TL SSR RN Support Agnostic Dynamic Babel plugins Bindings
fela ✅ ✅ ✅ ✅ ✅ react-fela native-fela preact-fela inferno-fela
jss ✅ ✅ ✅ ✅ ✅ ✅ react-jss styled-jss
rockey ✅ ✅ ✅ rockey-react
styled-components ✅ ✅ ✅ ✅ ✅
aphrodite ✅ ✅ ✅
csx ✅ ✅ ✅
glam ✅ ✅ ✅ ✅
glamor ✅ ✅ ✅ ✅
glamorous ✅ ✅ ✅ ✅
styletron ✅ ✅ ✅ ✅ styletron-react
aesthetic ✅ ✅
j2c ✅ ✅ ✅

文章

视频

基准测试