* loads the styles before the content or markup
* as fast or faster than CSS
* able to have the power of modularized CSS preprocessors for reducing complex styles
* worth the effort.
I'm not against the idea but practically every single instance it comes up it feels like programmers who don't get CSS trying to write something in what they DO understand that handles CSS so they don't have to.
That's fine, and useful, but lets not pretend it's better.
Many CSS-in-JS libraries also handle style modularization, often in ways arguably better than CSS preprocessors. There's a lot of variety here.
I'm not sure what you mean by "faster than CSS". CSS can be fast or slow, depending on how the CSS is written.
You should take a look at: https://github.com/MicheleBertoli/css-in-js
Render-time is waaaay too late. The ship has sailed at that point: so no, that doesn't take care of your first point.
> Many CSS-in-JS libraries also handle style modularization, often in ways arguably better than CSS preprocessors.
I've yet to see one that comes even close to SASS - not even the same game let alone the same league - so agree to disagree here.
> You should take a look at: https://github.com/MicheleBertoli/css-in-js
I have - all it shows is that css-in-js is not a realistic competition for sensible modular CSS via something like SASS (CSS Modules, etc, good patterns).
If your app is rendered via JS, having the CSS loaded at runtime should not matter: there's no markup to affect (repaint) and the CSS will be available before your React/etc components are rendered up.
only if it's pure browser-side only. Which is fine I guess - at that point you've given up on rendering performance anyhow generally (especially in initial paint).
Now you could extract the CSS with a build step... but at that point you've admitted the solution is poor (and/or you're not good at CSS) and are just mitigating it by producing real CSS by automation.
That's fine, but it's no replacement for general good practice or domain knowledge.
CSS Modules is not a CSS-in-JS framework - which is what I'm talking about - it's a design pattern for CSS abstraction.
That's all good, I prefer Atomic Design principles but the concept is similar.