3 ms·
Posted on another thread and haven’t heard an answer, so I’ll post it here too… Serious question: how do you refactor code when using nesting? In my experience
by purplerabbit 4y ago
Posted on another thread and haven’t heard an answer, so I’ll post it here too… Serious question: how do you refactor code when using nesting? In my experience it makes styles impossible to audit.
- MrJohz 4y agoI tend to use nesting in combination with some form of scoped CSS (e.g. CSS modules, or the built-in forms available in Vue/Svelte). For me, this helps a lot with refactoring code, because each style is only relevant to a single component. Nesting is then useful within that component for handing specific states (e.g. `.active`, or indeed `:active` and other pseudo-classes), but it can never get too out of hand, because the CSS as a whole is very connected to its component. If I change the component markup, I know where to look up change the CSS (and vice versa), and if I'm making broader changes then I know quite easily when a particular file or declaration is no longer necessary.