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.
I feel your pain. Here some some links:
ReplyDeletehttp://www.wait-till-i.com/2005/12/06/what-i-want-from-css3-nested-declaration-blocks/
http://lesscss.org/
It was talked about for the specification but eventually was shot down, one large drawback of it is the fact that on large files you may not know if your already in a parent element.
ReplyDelete@Tony
ReplyDeleteI really like the mixins and variables idea in the lesscss.org link. They would be super handy.
@Emergence
ReplyDeleteYeah I was thinking that too. I think a code editor code could help by providing a hover over or CTRL click would identify where you are in the hierarchy.