Re: CSS: grouping sub-element styles for a specific class/id/tag in CSS3?

On Wed, Sep 29, 2010 at 7:53 AM, Sascha Meyer <harlequin2@gmx.de> wrote:
> Hi W3C-list,
>
> I am wondering if CSS3 will have a mechanism to group child rules for one
> class/id/tag? I had the idea this morning when I had to write rules similar
> to this:
>
> [CSS]
> #header #navigation {. }
> #header #navigation ul {. }
> #header #navigation ul li {. }
> [/CSS]
>
> So I thought that a syntax similar to the following could be pretty handy
> because you'd find all rules for sub-elements inside the parent's css rule:
>
> [CSS]
> #header #navigation {
>  ul {
>    li {
>      /* li's css rules */
>      ...
>    }
>    /* ul's css rules */
>    ...
>  }
>  /* #header #navigation's css rules */
>  ...
> }
> [/CSS]
>
> Less writing, more structure, the sequence of appearance could also be
> predefined (i.e. if a class defines sub-element rules, these have to be
> defined first, after this the class' own style rules have to be defined)
> which could help reading longer CSS stylesheets much more easy.

This has been suggested a few times.  I agree that it's a fairly
useful sort of thing to have; I've often had big blocks of selectors
repeated over and over again with changes just to the last bit of it.

However, this is a major violation of CSS's Core Grammar, the thing
that specifies how CSS is parsed in general.  We try to minimize the
changes to the Core Grammar, because it constitutes a sort of contract
with implementors.

Luckily, there are tools that can help with this.  There are CSS
compilers, like LESS (http://lesscss.org/), that can handle nested
blocks like this and will translate it into vanilla CSS for you.  They
also offer other useful abilities, like Variables and Mixins, which
haven't made it into CSS yet.  Perhaps you can try using one of those?

~TJ

Received on Wednesday, 29 September 2010 19:38:01 UTC