Re: [csswg-drafts] [css-nesting] Suggest a way to inspect CSS nesting in browser DevTools (#8236)

I like @denk0403's suggestions but regarding the Styles/Rules panel, I wonder whether completely desugaring actually helps debugging the selectors.

To avoid indentation hell within the panel, this might be ok, though there should at least be a popup showing the original selector structure on hover.

On the other hand, the Sources/Style Editor panel (and also IDEs) should provide a way to display the desugared selectors. This could also be a popup on hovering the inner selectors.
Hovering the nesting selector could still only show the parent selector(s) like in @denk0403's mockup. With that, authors would be able to see what's behind the `&` and also have a way to see the result of their nested rules.

In addition to displaying the parent selectors for the `&`, I think it would make sense to link to them. So it's easier to debug them, especially in case the related rules are long and/or the nesting is deep.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8236#issuecomment-1368135693 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 31 December 2022 00:41:01 UTC