4 ms·
One thing that drives me bananas about all these CSS-in-JS libraries is that they enforce object notation for styles, rather than CSS. With CSS, you can levera
by codelikeawolf 3y ago
One thing that drives me bananas about all these CSS-in-JS libraries is that they enforce object notation for styles, rather than CSS.
With CSS, you can leverage dev tooling and take advantage of the powerful features that it offers. If you try jamming something like an :is() selector into the arbitrary string of an object key, it becomes an unmanageable mess. I feel like type safety isn't a feature, it's a "fat-finger mistake" deterrent.
I used to be on team CSS-in-JS. These days I prefer to use CSS modules.
- MrJohz 3y agoThis is generally how I feel as well - CSS is really powerful, but also a lot simpler than it used to be in many ways, and to me it makes sense to lean into that. That said, I find the tooling for CSS modules tends to be fairly dire - type annotations are poor, jumping between different files is a nuisance, jump-to-definition rarely behaves correctly, etc. It could be a lot better, but it feels like there's no single organisation pushing CSS modules forwards like they have with certain CSS-in-JS frameworks, or with Tailwind.
- codelikeawolf 3y ago100% agree on the tooling issues. WebStorm does its best, but it leaves something to be desired. CSS modules are the only way to get around some of Svelte's scoped style gotchas without needing to ship a runtime (e.g. Emotion). So I play through the pain.
- dbbk 3y agoNo they don't? Styled Components and Emotion let you use either object notation or the css`` template syntax. I used to prefer object notation because of the typing, but I found a VSCode extension that gives you full CSS autocomplete in the template.