[indirectlylit]

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-shor...

[2] https://vue-loader.vuejs.org/guide/scoped-css.html

[Mlller]

Yes, I cannot agree more. I did the survey in the vain hope that I could leave a comment or even vote for “no nesting”, i.e. “equivalent CSS”. Most of the given examples are great evidence – some concerningly great evidence – for Tim Petersʼ “flat is better than nested”:

(1 and 2:)

  .foo {
    color: red;

    @nest .parent & {
      color: blue;
    }
  }

(3:)

  .foo {
    color: red;

    {
      .parent & {
        color: blue;
      }
    }
  }

(Without nesting:)

  .foo {
    color: red;
  }
  
  .parent .foo {
    color: blue;
  }

The nested variants, for my sense, foreshadow grave technical debt – in specs, docs, browser code and CSS files.