Man I wish... CSS Version

Tagged and

It's one of those days, you know where you find yourself saying "Man, why can't ______ just work THIS way.

Today's target? CSS. Now I know there are preprocessors that make writing CSS easier, blah, blah, blah, blah... blah. I like writing CSS, and the idea of learning a new syntax to make writing CSS easier seems silly. If you are new to CSS then maybe.

I just wish there were some conventions to make writing nested rules easier. Take this example:

header {
    background: #000;
    width: 100%;
}
    header .container {
        background:#333;
    }

section#first { background: #fff; width: 100%; } section#first .container { background: #f00; width: 100%; }

Pretty simple and common pattern. What I would love to do is something like this:

header [{
    __self {
        background: #000;
        width: 100%;
    }
.container {
    background:#333;
}

}];

section#first [{
__self {
background: #fff;
width: 100%;
}

.container {
    background: #f00;
    width: 100%;
}

}];

Doesn't that seem like a more useful syntax when you are working with complex designs? Maybe it's just me.