- From: Henry Rapley <froggywillneverdie@msn.com>
- Date: Mon, 4 May 2009 20:32:28 +0100
- To: <www-style@w3.org>
- Message-ID: <COL116-W1112E00086E7D32CB3AA86DB680@phx.gbl>
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