Grouped/nested selectors/elements

I would like to start of by apologising in the case that this has already been discussed.
I did not have much luck in finding any discussions on this idea.

In css, quite often you will end up repeating parts of selectors for different style rules
just to apply rules to elements which are contained inside other elements, as shown
in the example below (in case I'm not wording things well):

ul.tabs li {
    display: inline;
}

ul.tabs  li a {
    padding: 6px 12px;
    color: #FFFFFF;
}

ul.tabs li a:hover {
    background-color: #0099CC;
    padding: 12px 18px;
}

In the above, ul.tabs is repeated. In the actual (X)HTML code, the element is opened and
closed once. List items and links are contained inside them. So why is it that this can't
currently be done in CSS?

I propose an addition to the CSS3 specification, which allows rules and selectors to be
grouped together inside braces. One idea I had would be to use an at-rule, making it clear
that the rules inside are to be grouped with the same selectors. A suitable name for such
an at-rule seems like an unusual one to think of, and I have a few suggestions, each for
a different reason. In the example below I will use "[rule]" as a placeholder for these ideas.
Example:

@[rule] ul.tabs {
    li {
        display: inline;
    }

    li a {
        padding: 6px 12px;
        color: #FFFFFF;
    }

    li a:hover {
        background-color: #0099CC;
        padding: 12px 18px;
    }
}

This way of grouping selectors has the potential to keep things more organised, and
could make the CSS itself less repetitive.

Possible names for this at-rule (assuming they are not already used) are `selector`,
`nest`, `group`, and `element`.

`selector`: This refers to the idea that the rules are being applied to all elements defined
              by the selector at the top. It does also seem like it could mean the rules are
              being applied to the selector itself, which does not really make much sense.

`nest`: This is quite a plain name but does not make much sense.

`group`: This is fairly plain, easy to understand. It isn't very specific, though.

`element`: Element makes much more sense as an at-rule name. HTML Dog states that
                "At-rules encapsulate a bunch of CSS rules and apply them to something specific.".
                @element at-rules encapsulate a bunch of CSS rules and apply them to a specific
                element defined by a selector. To me, this makes much more sense, but `tag` could
                be used just as well.

Now, some people may think that this idea is pointless or has great flaws.. I personally think
that this idea could make things more messy if people nest an @element block inside an @element
block and so on. Therefore, I propose that it should not be possible to nest them inside each
other.

Rules for the selector defined in the at-rule could be defined separately, in the usual manner.
If not, then I guess a :parent {} ruleset could be used inside the block, but I'm not too sure.

Thoughts, opinions, feedback, whatever. All is appreciated.

Thanks for reading.

- photofroggy.

Received on Tuesday, 5 May 2009 05:53:59 UTC