[tempmac]

hmm maybe IDE plugins can solve this? (eg. add a 'hover to show css' or 'expand css if I press ctrl+alt')

as for tailwild, I just can't bare its wide-ness - too many className attribute string going over 150~300 char widths, with some ternary operators mixed on top...

(seems vanilla-extract / ete have better DX, with occasional inlining for immediate deadlines)

[sbergot]

The only way to know is to go to the page and inspect it using devtools. No Ide will be able to infer which rule is going to apply to any given element.

But the problem is that you need to make sure that a given css change is going to affect only a specific set of component. So you need to check all components. Since it will be too time consuming, you will probably skip this step and hope for the best (and do some QA to check that nothing is obviously broken).

[tempmac]

hmm it might be possible with enough tooling:

- read from webpack's output

- read from css-in-js: emotion / vanilla-extract / etc

[kaba0]

Then you avoid the browser, by emulating half a browser.. which is still useless, because you have plenty dynamic state you can’t test this way.