Thinking about how to enhance the CSS nesting UX in DevTools.

IShadeed offers insights into frontend development, CSS architecture, and web design principles, providing tutorials, articles, and workshops to help developers master CSS and create visually appealing user interfaces. By exploring IShadeed's curated content, developers can learn about CSS layout techniques, responsive design patterns, and CSS animation effects for enhancing the look and feel of web applications. Whether you're a frontend developer, UI designer, or CSS enthusiast, IShadeed offers resources to improve your CSS skills and elevate your frontend development projects.

Ahmad Shadeed

This article discusses the problem of inconsistent CSS nesting display in DevTools and proposes several solutions to improve the user experience. It also explores the different behaviors of DevTools when copying a nested rule set.

CSS Nesting UX in DevTools

What should happen when copying a nested rule set?

If any of these proposals (or something similar) gets implemented, I think it should be applied to both nested and “the old way” identically.
Both of the following sources codes should be identical in the UI:
<pre><code class="language-css">div {
 &amp; p {
 &amp;:invalid {
 color: red;
 }
 }
}
</code></pre>
<pre><code class="language-css">div p:invalid {
 color: red;
}
</code></pre>