{children}
Simple, isolated CSS-in-JS for React components.
Usage · Highlights · Why? · Documentation
Caution
Cease is currently experimental. It's working well for me so far, but I haven’t used it any serious production app yet, and you should be very careful before doing so. Please give it a try, and open an issue if you find anything broken or unexpected.
Usage
// define a React componentconst Heading = <h1>children</h1> // apply your stylesheet to itconst Styled = css` h1 { color: red; }`Heading // use the styled version throughout your app
This component will now be rendered in Shadow DOM, insulating it from other styles in the app.
See more examples in the Guide…
→Highlights
- tiny: 500 bytes, zero dependencies
- simple: powered by native browser APIs
- compilation-free: no build step required
- standard syntax: conventional CSS without gimmicks
Why?
CSS-in-JS is great. However, existing libraries have drawbacks:
- Complication. There are many different ways to apply styles to components, leading to a large API surface area (and bugs). Additionally, compilers like Babel and Webpack are often required to run the code.
- Lack of isolation. CSS scales best when components don't interfere with each other. Although many libraries promote scoping, edge cases always exist allowing styles to leak.
- Performance gotchas. Common usage patterns can impact render latency.
Cease is an experiment to keep things simple by leveraging browser APIs for isolation in concert with standards-compliant CSS. See more about how it works in the Guide.