tuchk4 / Awesome Css In Js
Licence: cc0-1.0
Awesome CSS in JS articles / tutorials / videos / benchmarks / comparision
Stars: ✭ 548
Projects that are alternatives of or similar to Awesome Css In Js
Use Resize Observer
A React hook that allows you to use a ResizeObserver to measure an element's size.
Stars: ✭ 305 (-44.34%)
Mutual labels: css-in-js
Color2k
a color parsing and manipulation lib served in roughly 2kB
Stars: ✭ 370 (-32.48%)
Mutual labels: css-in-js
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. 💅
Stars: ✭ 428 (-21.9%)
Mutual labels: css-in-js
Babel Plugin Tailwind Components
Use Tailwind with any CSS-in-JS library
Stars: ✭ 320 (-41.61%)
Mutual labels: css-in-js
React Native Web
React Native Components and APIs for the Web
Stars: ✭ 19,563 (+3469.89%)
Mutual labels: css-in-js
Trousers
hooks-first CSS-in-JS library, focused on semantics and runtime performance
Stars: ✭ 295 (-46.17%)
Mutual labels: css-in-js
Typography.js
A powerful toolkit for building websites with beautiful design
Stars: ✭ 3,697 (+574.64%)
Mutual labels: css-in-js
Glaze
CSS-in-JS microlibrary for making design systems approachable with React
Stars: ✭ 410 (-25.18%)
Mutual labels: css-in-js
Next Shopify Storefront
🛍 A real-world Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.
Stars: ✭ 317 (-42.15%)
Mutual labels: css-in-js
React Awesome Reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 346 (-36.86%)
Mutual labels: css-in-js
Cljss
Clojure Style Sheets — CSS-in-JS for ClojureScript
Stars: ✭ 382 (-30.29%)
Mutual labels: css-in-js
Style9
CSS-in-JS compiler inspired by Facebook's stylex
Stars: ✭ 314 (-42.7%)
Mutual labels: css-in-js
Design System Utils
👩🎨 Access your design tokens with ease
Stars: ✭ 465 (-15.15%)
Mutual labels: css-in-js
Glamorous
DEPRECATED: 💄 Maintainable CSS with React
Stars: ✭ 3,681 (+571.72%)
Mutual labels: css-in-js
React Redux Saga Boilerplate
Starter kit with react-router, react-helmet, redux, redux-saga and styled-components
Stars: ✭ 535 (-2.37%)
Mutual labels: css-in-js
Gatsby Starter Hero Blog
A ready to use, easy to customize, fully equipped GatsbyJS starter with a 'Hero' section on the home page.
Stars: ✭ 500 (-8.76%)
Mutual labels: css-in-js
Twin.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+837.41%)
Mutual labels: css-in-js
Awesome CSS in JS
A collection of awesome things regarding to CSS in JS approach
Table of Contents
Libraries
- linaria - Zero-runtime CSS in JS library
- freestyler - 5th generation React styling library
- emotion - 👩🎤 The Next Generation of CSS-in-JS
- fela - Universal, Dynamic & High-Performance Styling in JavaScript
- styled-jss - Styled Components on top of JSS
- react-jss - JSS integration for React
- jss - JSS is a CSS authoring tool which uses JavaScript as a host language
- rockey - Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
- styled-components - Universal, Dynamic & High-Performance Styling in JavaScript
- aphrodite - It's inline styles, but they work! Also supports styling via CSS
- csx - ϟ A CSS-in-JS solution for functional CSS in functional UI components
- styled-jsx - Full CSS support for JSX without compromises
- glam - crazy good css in your js
- glamor - css in your javascript
- glamorous - React component styling solved with an elegant API, small footprint, and great performance (via glamor)
- styletron - ⚡️ Universal, high-performance JavaScript styles
- radium - Set of tools to manage inline styles on React elements.
- aesthetic - Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using objects, importing stylesheets, or simply referencing external class names.
- j2c - CSS in JS library, tiny yet featureful
NOTE table is still not completed. If there is bug or need to add another library - please suggest PR.
How to read the table:
As Object - When declare CSS using Objects.
{
color: 'red',
}
As TL - When declare CSS using Template Literals.
`
color: red;
`
SSR - Server Side Rendering.
RN Support - React Native support.
Agnostic - Framework agnostic. Means that library could used with any framework.
Dynamic - When it is possible to write CSS that depends on runtime values like component props.
{
color: props => props.color
}
props => ({
color: props.color
})
`
color: ${props => props.color}
`
Babel plugins - If there are any babel plugins for performance optimization.
Bindings - If there are packages that provide bindings for another framework or library.
Package | As Object | As TL | SSR | RN Support | Agnostic | Dynamic | Babel plugins | Bindings |
---|---|---|---|---|---|---|---|---|
emotion | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | react-emotion, preact-emotion |
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 | ✅ | ✅ | ✅ |
Articles
- A Unified Styling Language - why writing your styles in JavaScript isn’t such a terrible idea after all, and why I think you should be keeping an eye on this rapidly evolving space.
- Is CSS-in-JS really bad for UX? - CSS in JS performance implications - JS developers are too focused on DX and keep forgetting about how important performance for UX is.
- I swore never to use CSS in JS, here are 6 reasons why I was wrong- "When I first heard of this idea, I was shocked..." But here are 6 reasons why it is useful.
- Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS - Making Styling Better With better CSS / with Components / with JavaScript and final approach with ITCSS and Aphrodite
- Rockey. Motivation and Requirements - Article about requirements for CSS in JS approach and motivation to develop another one CSS in JS library - rockey.
- CSS in JS: The Argument Refined
- Inline Styles are so 2016
- “Scale” FUD and Style Components
- JSS is a better abstraction over CSS
- A 5-minute Intro to Styled Components
- Styled Components: Enforcing Best Practices In Component-Based Systems
- 💅 styled components 💅 — Production Patterns
- Introducing glamorous 💄
Videos
- Styling React/ReactNative Applications - Max Stoiber at React Amsterdam
- CSS in JS tech chat with Kent C. Dodds and Sarah Drasner
- CSS in JS without Compromise by François de Campredon at react-europe 2016
- Glamorous Walkthrough by Kent C. Dodds
- ColdFront16 • Glenn Maddern: The Future of Reusable CSS
- Ryan's Random Thoughts on Inline Styles by Ryan Florence
- CSS in JavaScript
Benchmarks and comparison
- tuchk4/css-in-js-app - React application with different css-in-js approaches and libraries.
- A-gambit/CSS-IN-JS-Benchmarks RESULTS.md
- hellofresh/css-in-js-perf-tests - CSS-in-JS performance tests
- jsperf: jss-vs-css
- jsperf: classes vs inline styles
- MicheleBertoli/css-in-js React: CSS in JS techniques comparison.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].