DEdeepanchor·Dec 7, 2020
Tailwind is not for me, simply because I don't want to have to learn yet another DSL that may or may not be abandoned in the future. I understand this is a personal decision though, but I've been burned too many times by fads.
My ideal CSS solution which doesn't seem to exist yet:
- Be able to write plain old CSS in JS/TS directly within a React component's tags, with a JS object literal
- Automatically generate atomic classes for each CSS rule (or block of rules) and have the system reuse those rules when the same styles are used elsewhere (no rule duplication means smaller bundle sizes for SSR, plus you get the semantic clarity of using plain CSS rules)
- Compiled, with zero or near-zero runtime overhead and critical path extraction, all cacheable by the browser. I don't want a huge runtime just so that I can dynamically apply a backgro
Read the rest
und colour.
The thing that comes closest to this is probably something like Linaria [1], but it relies on tagged template literals instead of object literals which means I can't use autocompletion. Their API for dynamic styling also relies on HTML data attributes, which is a little clunky.
Stiches [2] is another interesting project, however adoption doesn't seem very high and it seems to create superfluous wrapper nodes which can cause performance degradation in large VDOM trees. There's also no mechanism to colocate styles within a component's tags.
CSS Blocks [3] looks very promising also, but it doesn't allow co-location of styles with React components (you need to make a separate CSS file for each component).
[1] https://github.com/callstack/linaria
[2] https://github.com/modulz/stitches
[3] https://github.com/linkedin/css-blocks