CSS-Zero
Features
- All of the benefits of writing CSS-in-JS, but with zero runtime code
- Write your styles with familiar CSS Syntax
- Generates optimized, atomic CSS with no duplicated style rules
- Style resolution based on order of application, rather than the cascade
- Zero config server-side rendering for applications that support CSS Modules
- Easy composition of styles, with property name collisions eliminated via static analysis
- Theme support via CSS variables, allowing the cost of theming to be proportional to the size of the color palette
- Fast parsing of styles, with CSS downloaded and parsed separately from JS.
- Works without JavaScript, as styles are extracted at build-time.
These benefits are in addition to the more general benefits of using CSS-in-JS:
- Scoped selectors to avoid accidental collision of styles
- Styles co-located with your component reduces context switching
- Refactor with confidence when changing/removing styles
- Detect unused styles with EsLint, just like normal JS variables
- Declarative dynamic styling with React
Installation
Since CSS-Zero has no runtime, it can be installed purely as a devDependency:
npm install css-zero --save-dev
Setup
The simplest way to run CSS-Zero in a React application is using our Babel Macro:
import css styled from 'css-zero/macro';
For applications created using Create React App (which supports both Babel Macros and CSS Modules out-of-the-box), no further setup or configuration is needed.
For usage with other front-end frameworks, CSS-Zero can be set up with our babel-plugin.
Syntax
The basic usage of CSS-Zero looks like this:
import css styles from 'css-zero'; // Write your styles using the `css` tagconst blue = css` color: blue;`; const base = css` color: red; font-size: 16px;`; // then use the `styles` helper to compose your styles and generate class names <div = />; ↓ ↓ ↓ ↓ ↓ ↓ Compiles to ↓ ↓ ↓ ↓ ↓ ↓ <div = /> // along with a the following .zero.css file:x1vong5g color:bluex1dqz7z3 color:redx1e4w2a9 font-size:16px