CSS nesting module

[liancheng]

I personally had little web development experience and found it hard to organize complicated CSS. Is it feasible to implement the CSS nesting module so that CSS belonging to the same widget/module is visually clear?

An example from this Chrome developer article:

Before

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

After

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

And here is the CSS Nesting Module spec: https://www.w3.org/TR/css-nesting-1/

[davep]

This is something we would like to do.

[willmcgugan]

Yeah. I think we do need this.