Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
[css-nesting] Status? #998
(apologies if this was discussed in the Seattle F2F, haven't caught up with the Minutes yet!)
According to this, out of a sample size of 1838 authors, 32% cite nesting as their Number 1 reason for still using a preprocessor, same percentage as variables.
Perhaps it's time to revisit nesting? Tab drafted a proposal a while ago but it seems to not have collected significant WG interest.
Delegating nesting to preprocessors produces CSS with long, repetitive, slow chains of selectors and ridiculous specificity. These days, authors are even resorting to patterns like BEM which abolish descendant and child selectors altogether and put the descendant information in the class attribute (like
Nesting in CSS would free authors from preprocessors, it could allow performance optimizations in browsers (any implementors want to weigh in on this?) and we might be able to do something more reasonable for specificity. Furthermore, nesting makes CSS code easier to read compared to descendant selectors.
A while ago, @tabatkins told me that he's not working on the proposal because this can be done with a Houdini
So, what's the status on this spec? If there are no blockers, could we move it to drafts.csswg.org? If there is consensus that it should move forward, I could do it. Tab, are you still interested in working on it?
Just discovered while investigating some internal developer questions. There's definitely some confusion on this issue (not necessarily caused by the CSS WG itself). E.g. nesting is currently being advertised as a "tomorrow's CSS feature" - http://cssnext.io/. I'd love to see it in the CSS spec itself since moving away from "everyone's using their own semi-standard language" definitely seemed to be healthy for the JS ecosystem.
In a recent project
I had to write ".layout1" many times:
Having something like Sass's Nesting
would allow me to write the string ".layout1" only once (ditto for the string ".layout2" and ".layout3").
Regarding https://tabatkins.github.io/specs/css-nesting/ :
I think I'd prefer a syntax like that of Sass
where it's not necessary to add the ampersand.
In Sass, the ampersand is available (but not required - that's what I want).
One of their examples:
is equivalent to this:
referenced this issue
May 24, 2018
Perhaps this ticket here can be closed?