CSS Blocks
Publikováno: 27.4.2018
A new entry into the CSS-in-JS landscape! Looks like the idea is that you write an individual CSS file for every component. You have to work in components, that's how the whole thing works. In the same isle as styled-components, css-modules, and glamorous.
Then you write :scope { } which is the base style for that component. Which I guess means you get out of having to pick a name! But also means you're pretty locked in …
The post CSS Blocks appeared first on CSS-Tricks.
A new entry into the CSS-in-JS landscape! Looks like the idea is that you write an individual CSS file for every component. You have to work in components, that's how the whole thing works. In the same isle as styled-components, css-modules, and glamorous.
Then you write :scope { } which is the base style for that component. Which I guess means you get out of having to pick a name! But also means you're pretty locked in (true with just about any style processing setup).
Then both the CSS and component are compiled, and probably optimized with its partner tool OptiCSS. The end result is super optimized styles. Since it's "template aware", the styles can be far more optimized than they could be by any system trying to optimize CSS in isolation.
With CSS Blocks, and OptiCSS running at its core, you get to write ergonomic CSS and let the build take care of making your stylesheets properly scoped, screaming fast, and fantastically small.
Speed, style scoping, and never/rarely having unsued CSS definitely seem like the big benefits to me. A non-trivial thing to move to, but sounds like it could be worth it for plenty of big sites and new sites.
A couple of setup repos to explore to see how it could work: css-blocks-webpack-3 and css-blocks-hello-world.
Direct Link to Article — Permalink
The post CSS Blocks appeared first on CSS-Tricks.