{"id":13567431,"url":"https://github.com/tuchk4/awesome-css-in-js","last_synced_at":"2025-10-13T22:30:31.427Z","repository":{"id":38206492,"uuid":"92740520","full_name":"tuchk4/awesome-css-in-js","owner":"tuchk4","description":" Awesome CSS in JS articles / tutorials / videos / benchmarks / comparision","archived":false,"fork":false,"pushed_at":"2020-10-12T07:46:02.000Z","size":27,"stargazers_count":612,"open_issues_count":2,"forks_count":32,"subscribers_count":30,"default_branch":"master","last_synced_at":"2024-05-22T21:01:35.423Z","etag":null,"topics":["awesome","awesome-list","css-in-js"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tuchk4.png","metadata":{"files":{"readme":"README-ZH_CN.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-29T13:02:56.000Z","updated_at":"2024-05-21T16:59:18.000Z","dependencies_parsed_at":"2022-08-19T10:02:02.949Z","dependency_job_id":null,"html_url":"https://github.com/tuchk4/awesome-css-in-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuchk4%2Fawesome-css-in-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuchk4%2Fawesome-css-in-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuchk4%2Fawesome-css-in-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuchk4%2Fawesome-css-in-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tuchk4","download_url":"https://codeload.github.com/tuchk4/awesome-css-in-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236409048,"owners_count":19144223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","awesome-list","css-in-js"],"created_at":"2024-08-01T13:02:31.335Z","updated_at":"2025-10-13T22:30:26.393Z","avatar_url":"https://github.com/tuchk4.png","language":null,"funding_links":[],"categories":["Others","Other Lists","Misc"],"sub_categories":["TeX Lists"],"readme":"# CSS in JS 相关类库\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) [![Build Status](https://travis-ci.org/tuchk4/awesome-css-in-js.svg?branch=master)](https://travis-ci.org/tuchk4/awesome-css-in-js)\n\n\n一个关于CSS in JS方法的很棒的集合\n\n## 目录\n\n- [库](#库)\n- [文章](#文章)\n- [视频](#视频)\n- [基准测试](#基准测试)\n\n## 库\n\n- [fela](https://github.com/rofrischmann/fela/) - 通用的、动态的、高性能的JavaScript样式\n- [styled-jss](https://github.com/cssinjs/styled-jss) - 在JSS上有样式的组件\n- [react-jss](https://github.com/cssinjs/react-jss) - 在react中集成jss\n- [jss](https://github.com/cssinjs/jss) - JSS是一种CSS创作工具，它使用JavaScript作为宿主语言\n- [rockey](https://github.com/tuchk4/rockey) - 使用js的组件的Stressless CS. 编写基于组件的CSS和功能混合.\n- [styled-components](https://github.com/styled-components/styled-components) - 通用的、动态的、高性能的JavaScript样式\n- [aphrodite](https://github.com/Khan/aphrodite) - 它是内联样式，但他们工作!还支持通过CSS样式化\n- [csx](https://github.com/jxnblk/cxs) - ϟ 一个cssin - js解决方案，用于功能性UI组件的功能性CSS\n- [styled-jsx](https://github.com/zeit/styled-jsx) - 完整的CSS对JSX的支持\n- [glam](https://github.com/threepointone/glam) - 在你的js中使用疯狂的css\n- [glamor](https://github.com/threepointone/glamor) - 在你的js中使用css\n- [glamorous](https://github.com/paypal/glamorous) - 通过优雅的API、小的足迹和出色的性能(通过glamor)来解决组件样式的问题\n- [styletron](https://github.com/rtsao/styletron) - ⚡️ 通用、高性能JavaScript风格\n- [radium](https://github.com/FormidableLabs/radium) - 在react元素上用于管理内联样式的工具集\n- [aesthetic](https://github.com/milesj/aesthetic) - Aesthetic是用于样式组件的强大的react库，无论是使用对象的cssin - js，导入样式表，还是仅仅引用外部类名。\n- [j2c](https://github.com/j2css/j2c) - CSS在JS库中，小巧而又有特点\n\n\n\u003e 注释表还没有完成。如果有bug或需要添加另一个库，请建议PR。\n\n如何阅读表格:\n\n**As Object** - 当使用对象声明CSS时。\n```js\n{\n  color: 'red',\n}\n```\n\n**As TL** - 当使用模板文本声明CSS时。\n```js\n`\n  color: red;\n`\n```\n\n**SSR** - 服务端渲染。\n\n**RN Support** - React Native支持。\n\n**Agnostic** - 框架不可知的。 意味着这个库可以用于任何框架。\n\n**Dynamic** - 当可以编写依赖于运行时值的CSS时，就像组件道具一样。\n```js\n{\n  color: props =\u003e  props.color\n}\n```\n\n```js\nprops =\u003e ({\n  color: props.color\n})\n```\n\n```js\n`\n  color: ${props =\u003e props.color}\n`\n```\n\n**Babel plugins** - 如果有任何用于性能优化的babel插件。\n\n**Bindings** - 如果有为另一个框架或库提供绑定的包。\n\n| Package | As Object | As TL | SSR | RN Support | Agnostic | Dynamic | Babel plugins | Bindings |\n|:-----------------:|:-------------:|:------------------------:|:--------------------:|----------------------|--------------------|-------------|---------------|----------|\n| [fela](https://github.com/rofrischmann/fela/) | ✅ |  | ✅ | ✅ | ✅ | ✅ |  | [react-fela](http://fela.js.org/docs/guides/UsageWithReact.html) [native-fela](http://fela.js.org/docs/guides/UsageWithReactNative.html) [preact-fela](http://fela.js.org/docs/guides/UsageWithPreact.html) [inferno-fela](http://fela.js.org/docs/guides/UsageWithInferno.html) |\n| [jss](https://github.com/cssinjs/jss) | ✅ | ✅ | ✅ |  | ✅ | ✅ | ✅ | [react-jss](https://github.com/cssinjs/react-jss) [styled-jss](https://github.com/cssinjs/styled-jss) |\n| [rockey](https://github.com/tuchk4/rockey) |  | ✅ |  |  | ✅ | ✅ |  | [rockey-react](https://github.com/tuchk4/rockey/tree/master/packages/rockey-react) |\n| [styled-components](https://github.com/styled-components/styled-components) |  | ✅ | ✅ | ✅ |  | ✅ | ✅ |  |\n| [aphrodite](https://github.com/Khan/aphrodite) | ✅ |  | ✅ |  | ✅ |  |  |  |\n| [csx](https://github.com/jxnblk/cxs) | ✅ |  | ✅ |  | ✅ |  |  |  |\n| [glam](https://github.com/threepointone/glam) | ✅ |  | ✅ |  | ✅ |  | ✅ |  |\n| [glamor](https://github.com/threepointone/glamor) | ✅ |  | ✅ |  | ✅ |  | ✅ |  |\n| [glamorous](https://github.com/paypal/glamorous) | ✅ |  | ✅ | ✅ |  | ✅ |  |  |\n| [styletron](https://github.com/rtsao/styletron) | ✅ |  | ✅ |  | ✅ | ✅ |  | [styletron-react](https://github.com/rtsao/styletron#using-styletron-with-react) |\n| [aesthetic](https://github.com/milesj/aesthetic) | ✅ |  |  |  | ✅ |  |  |  |\n| [j2c](https://github.com/j2css/j2c) | ✅ |  | ✅ |  | ✅ |  |  |  | |\n\n\n## 文章\n\n- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) - 为什么在JavaScript中写你的样式并不是一个可怕的想法，为什么我认为你应该关注这个快速发展的空间。\n- [Is CSS-in-JS really bad for UX?](https://medium.com/@okonetchnikov/is-css-in-js-really-bad-for-ux-e9cce7b2da83) - CSS在JS性能方面的影响——JS开发人员过于专注于DX，而忘记了用户体验的重要性。\n- [I swore never to use CSS in JS, here are 6 reasons why I was wrong](https://hackernoon.com/i-swore-never-to-use-css-in-js-here-are-6-reasons-why-i-was-wrong-541fe3dfdeb7)- “当我第一次听说这个想法的时候，我震惊了……”但这里有6个原因，为什么它有用。\n- [Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS](https://medium.com/maintainable-react-apps/journey-to-enjoyable-maintainable-styling-with-react-itcss-and-css-in-js-632cfa9c70d6) - 用更好的CSS /带有组件/ JavaScript和最终的方法，使用ITCSS和Aphrodite\n- [Rockey. Motivation and Requirements](https://medium.com/@tuchk4/rockey-motivation-and-requirements-f787d1ed61e0) - 关于JS方法中的CSS需求和在JS库中开发另一个CSS的动机——rockey。\n- [CSS in JS: The Argument Refined](https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955)\n- [Inline Styles are so 2016](https://medium.com/yplan-eng/inline-styles-are-so-2016-f100b79dafe1)\n- [“Scale” FUD and Style Components](https://medium.learnreact.com/scale-fud-and-style-components-c0ce87ec9772)\n- [JSS is a better abstraction over CSS](https://top.fse.guru/jss-is-css-d7d41400b635)\n- [A 5-minute Intro to Styled Components](https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55)\n- [Styled Components: Enforcing Best Practices In Component-Based Systems](https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/)\n- [💅 styled components 💅 — Production Patterns](https://medium.com/@jamiedixon/styled-components-production-patterns-c22e24b1d896)\n- [Introducing glamorous 💄](https://hackernoon.com/introducing-glamorous-fb3c9f4ed20e)\n\n## 视频\n- [Styling React/ReactNative Applications - Max Stoiber at React Amsterdam](https://www.youtube.com/watch?v=bIK2NwoK9xk)\n- [CSS in JS tech chat with Kent C. Dodds and Sarah Drasner](https://www.youtube.com/watch?v=BXOF_8jDdf8)\n- [CSS in JS without Compromise by François de Campredon at react-europe 2016](https://www.youtube.com/watch?v=DGEFNBYJRps)\n- [Glamorous Walkthrough by Kent C. Dodds](https://www.youtube.com/watch?v=lmrQTpJ_3PM)\n- [ColdFront16 • Glenn Maddern: The Future of Reusable CSS](https://www.youtube.com/watch?v=XR6eM_5pAb0)\n- [Ryan's Random Thoughts on Inline Styles by Ryan Florence](https://www.youtube.com/watch?v=EkPcGS4TzdQ)\n\n\n## 基准测试\n- [tuchk4/css-in-js-app](https://github.com/tuchk4/css-in-js-app) - 使用不同的cssin - js方法和库进行应用。\n- [A-gambit/CSS-IN-JS-Benchmarks](https://github.com/A-gambit/CSS-IN-JS-Benchmarks) [RESULTS.md](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md)\n- [hellofresh/css-in-js-perf-tests](https://github.com/hellofresh/css-in-js-perf-tests) - CSS-in-JS性能测试\n- [jsperf: jss-vs-css](https://jsperf.com/jss-vs-css/3)\n- [jsperf: classes vs inline styles](https://jsperf.com/classes-vs-inline-styles/4)\n- [MicheleBertoli/css-in-js](https://github.com/MicheleBertoli/css-in-js) React: CSS in JS 技术比较。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuchk4%2Fawesome-css-in-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftuchk4%2Fawesome-css-in-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuchk4%2Fawesome-css-in-js/lists"}