3 ms·
> Into actual css files or just <style> tags? Either, it depends on the library. It's becoming more popular to extract into regular css files as opposed to sty
by have_faith 5y ago
> Into actual css files or just <style> tags?
Either, it depends on the library. It's becoming more popular to extract into regular css files as opposed to style tags. This is usually referred to as 'zero runtime css-in-js' as it doesn't depend on any JS for styles to load but you still get the composability and benefits of writing it in js.
> you scope down to such a granular level that the style literally applies to that one element.
It applies to that component (and any instance of that component), css-in-js also supports all standard css composition so it's very easy to do something like target all spans tags inside FancyButtons, you don't only have to target components.
At the end of the day it's a superset of css, all normal css is valid so no css has been ditched. This has come about because css requires you to manually keep styles and components in sync and css-in-js couples them together in a way that removes that management while also making it impossible to accidentally cause conflicts e.g. multiple components defining their own Container will never touch each others css unless you explitly import that definition and use it.
I have nothing against regular css and I'm a big fan of SCSS and CSS modules but css-in-js has a lot of advantages.