What I want from CSS3 – nested declaration blocks
Back in October, “Andy Budd wanted to have min- and max-padding in CSS3“:http://www.andybudd.com/archives/2005/10/what_i_want_from_css3_part_1/index.php, so it seems only fair that for my 200th post here I can also give my $.02 and ask (and maybe stomp my little feet) for something in CSS3 (after all we can celebrate together in well, roughly 2010 when all browsers support it – that is if we still use browsers then):
I want nested declaration blocks!
I basically want them as I hate repeating myself, and I hate repeating code when it is not needed.
Currently there is a lot of repetition going on, especially when you use links:
#content ul{
list-style:square;
margin:0 2em;
}
#content li{
list-style:square;
padding:2px 5px;
line-height:1.3em;
}
#content a:link{
[...]
}
#content a:visited{
[...]
}
#content a:active{
[...]
}
#content a:hover{
[...]
}
#nav ul{
list-style:none;
margin:0;
}
#nav li{
list-style:none;
padding:2px 5px;
line-height:1.3em;
}
#nav a:link{
[...]
}
#nav a:visited{
[...]
}
#nav a:active{
[...]
}
#content a:hover{
[...]
}
Wouldn’t it be the cat’s pijamas to be able to do something like this?
#content {
ul{
list-style:square;
margin:0 2em;
}
li{
list-style:square;
padding:2px 5px;
line-height:1.3em;
}
a{
:link{[...]}
:visited{[...]}
:active{[...]}
:hover{[...]}
}
}
#nav {
ul{
list-style:none;
margin:0;
}
li{
list-style:none;
padding:2px 5px;
line-height:1.3em;
}
a{
:link{[...]}
:visited{[...]}
:active{[...]}
:hover{[...]}
}
}
Ok, I don’t necessarily need the pseudo selector nesting bit, but the main idea would be such a great shortcut.
Imagine how easy it would be to give instructions to CSS designers how to differentiate between JavaScript enhanced and normal styles. Imagine a script that adds a class called ‘dyn’ to a UL with the id ‘nav’ when JS and DOM is available. The CSS file could have the following instructions.
/* Styles for the static version */
ul#nav{
/* go nuts! */
}
/* Styles for the dynamic version */
ul#nav.dyn{
/* go even nuttier! */
}
Progressive enhancement would also be a snap:
/* For CSS3 browsers, like Opera 16
and Firefox 1.831425243 release candidate 2 */
html {
body{
[...]
}
}
I checked the “W3c CSS3 syntax reference”:http://www.w3.org/TR/2003/WD-css3-syntax-20030813/ but so far there is nothing of the sort in there. There is a rather cryptic example, which basically shows that you can use curly braces in a selector when you embed them in quotationmarks:
p[example="public class foo
{
private int x;
foo(int x) {
this.x = x;
}
}"] { color: red }
Which somehow confuses the heck out of me. What is this selector supposed to be?
Ok enough dreaming. Let’s see that we can get more people out there to upgrade first…
December 7th, 2005 at 12:53 am
… and the bee’s knees — all rolled into one! Great idea.
December 7th, 2005 at 3:03 am
What about writing something that pre-processes a file with the nested blocks like you have and outputs a normal CSS file?
Sure, its an extra step but at least that way you could write it your way now, and in 5 years you can drop the pre-processing phase.
Plus if you didn’t want to bother with the extra step it could even be done on-the-fly for each request — it should be relatively fast in most programming languages.
If performance ever was an issue you could set up something so that the translation is done for the first request, the CSS file written out, and all future requests would use the static file. There’d still be a small amount of overhead to check and see if the master is newer than the CSS file — regenerating the CSS if that’s the case — but it still should be lightening quick.
December 7th, 2005 at 8:40 am
Dan,
i’ve “done something similar to simulate CSS constants”:index.php?p=24 and sure thought about writing this one, too. Deep nesting might be tricky to do though.
Furthermore, right now I got a book to finish and haven’t started writing all of the TOC yet. :-)
December 7th, 2005 at 10:14 am
The last example I think would select:
<p example="public class foo{
private int x;
foo(int x) {
this.x = x;
}
}">Example para</p>
It’s a bit weird to embed code into an attribute but valid as far as I can see.
December 7th, 2005 at 11:01 am
Very, very funny! But I more optimist and I think that Mozilla in 2010 will be in 1.9 version!!!!!!!!!!! and no, Internet Explorer will not exist anymore. I hope…
July 14th, 2006 at 8:19 pm
I’ve written a PHP pre-processor to do exacly this before. Let me know if you want more info.
July 14th, 2008 at 7:49 am
[...] Skulic just emailed me about CSSPP, a CSS preprocessor inspired by my CSS wishlist and CSS constants [...]
September 10th, 2009 at 11:55 am
[...] issue is our inability to nest entire declaration blocks. The article "What I want from CSS3: nested declaration blocks" offers a smart outlook on the benefit of nested declaration [...]
September 10th, 2009 at 2:08 pm
[...] issue is our inability to nest entire declaration blocks. The article “What I want from CSS3: nested declaration blocks” offers a smart outlook on the benefit of nested declaration [...]
September 10th, 2009 at 9:44 pm
[...] issue is our inability to nest entire declaration blocks. The article "What I want from CSS3: nested declaration blocks" offers a smart outlook on the benefit of nested declaration [...]
September 12th, 2009 at 7:18 pm
[...] issue is our inability to nest entire declaration blocks. The article "What I want from CSS3: nested declaration blocks" offers a smart outlook on the benefit of nested declaration [...]
October 2nd, 2009 at 5:44 am
[...] issue is our inability to nest entire declaration blocks. The article "What I want from CSS3: nested declaration blocks" offers a smart outlook on the benefit of nested declaration [...]
March 3rd, 2010 at 11:38 pm
Check out .LESS for CSS