Man I wish... CSS Version

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.