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

captainbrosset has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nesting] Suggest a way to inspect CSS nesting in browser DevTools ==
CSS nesting is going to be such a major change to the way we write CSS. In fact, so much that the way we display it in our browser DevTools might need to change too!

The adoption of the feature will not only be driven by its implementation in browser, but also by tooling support to some extent. Code editors, obviously, will need to understand nesting, and help find errors and offer syntax highlighting and code completion. But browser developer tools will also need to display the new syntax to let users inspect their webpages and debug potential problems.

Of course, this isn't something that the CSS WG needs to specify, but I do believe that on top of designing this feature for the best authoring experience, some thoughts should be given to the debugging experience too.

Relatedly, I [posted last year](https://github.com/w3ctag/design-principles/issues/156) about how specs could suggest ways in which UAs could expose more debugging information to end users. This isn't exactly the same here. But the idea comes from the same need of thinking about how end users will inspect and debug web pages written with CSS nesting.

I would love it if various DevTools teams and CSSWG people could discuss and agree on the best way to represent nested rules in DevTools, in a way to makes it easy for people to learn how nesting even works, and reports errors (such as missing `&` signs).

Pinging a few DevTools peeps here: @janodvarko @nchevobbe @kilian @hashseed @codepo8.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8236 using your GitHub account


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

Received on Friday, 16 December 2022 09:51:31 UTC