Dec
Native CSS nesting with new Hierarchies spec
Googlers Shane Stephens and Tab Atkins Jr. recently posted the first editor’s draft of a new specification on CSS hierarchies. The CSS Working Group has been paying close attention to what’s happening in the world of CSS preprocessors (like LESS and SASS), and this is another illustration of that. Take this code:
.error, .warning {
padding: 10px;
}
.error p, .warning p {
font-size: 12px;
}
.error a, .warning a {
color: #f00;
}
.error a:hover, .warning a:hover {
border-bottom: 1px solid #f00;
}
When the spec is implemented, you will simply be able to write it like so:
.error, .warning {
padding: 10px;
& p { font-size: 12px; }
& a {
color: #f00;
&:hover {
border-bottom: 1px solid #f00;
}
}
}
The advantages are pretty clear: better readability and maintainability, and smaller file sizes!
If you’re wondering about compatibility, the spec says the following about this:
if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored
So a browser that doesn’t understand nested selectors will read the above example as:
.error, .warning {
padding: 10px;
}
While we wait for browser implementations, it would be great if all CSS preprocessors added support for this syntax so we can start getting used to it today you can actually start using this syntax today – it’s compatible with both LESS and SASS. (Thanks @dariocravero!)
