Thursday, June 24, 2010

CSS hierarchy wish

Alot, of times I find myself having a wrapper around some elements in my html so that I can do some custom css inside of it. In the css case below the wrapper is a div with a class of "webfolio".

div.webfolio h3{
font-size:1.5em;
color:#333;
}

div.webfolio div.article{
border:1px solid #666;
}

div.webfolio div.description{
color:#555;
}

Notice I have to write "div.webfolio" over and over. I just want to write it once, with everything (it's children) inside of it. I wish I could do it like this:

div.webfolio{

h3{
font-size:1.5em;
color:#333;
}

div.article{
border:1px solid #666;
}

div.description{
color:#555;
}

}

I just feel dirty writing the same name over and over. Yes, I realize if you get more than one or two deep in above css it would get harder to read. In a perfect world this could be prevented by code responsibility.