For me, the "equivalent css" is the most readable form in most of the examples given. I can understand how this would be useful in some situations. However, fr

For me, the "equivalent css" is the most readable form in most of the examples given. I can understand how this would be useful in some situations. However, from a practical perspective, I've found that writing nested CSS ends up creating a tight coupling between DOM structure and style rules which makes everything more brittle and harder to refactor [1]. I've personally been spoiled by the scoped styles in Vue [2] which makes this style of isolation in CSS mostly unnecessary. It serves a similar purpose as related encapsulation ideas like shadow DOM, BEM, CSS modules, and styled components. [1] https://csswizardry.com/2012/05/keep-your-css-selectors-short/ https://csswizardry.com/2012/05/keep-your-css-selectors-shor... [2] https://vue-loader.vuejs.org/guide/scoped-css.html https://vue-loader.vuejs.org/guide/scoped-css.html