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

Has it ever been brought up to have some sort of an inheritance system? Something like -

.extClass {
extends: .parentClass;
}

I know the same sort of function can be done by <tag class="extClass ParentClass"> but that is limited.  For example if I say
<tag class="blue red"> or <tag class="red blue"> I will get the same result based on the order of the class rule in the style sheet itself. So it lends itself to careful organization. 

The reason for this, I am an author who has followed this for some time and love learning from it, is that I am implementing a modular system for using css that is sort of related to OOP. I call is modular because it isn't truly object oriented.  And being able to have these would prove very useful. 

If there is a better way around this I would love to know.

Colt

-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Sascha Meyer
Sent: Thursday, September 30, 2010 1:42 AM
To: 'Tab Atkins Jr.'
Cc: www-style@w3.org
Subject: AW: CSS: grouping sub-element styles for a specific class/id/tag in CSS3?

Goog morning TJ,

I understand that a change like my suggested one is not easy to implement, I hadn't thought about CSS's core grammar and which impact such a change would have.
Thank you for the comprehensive explanation and the link to lesscss.org, will take a closer look at CSS compilers.

Best regards,

Sascha

-----Ursprüngliche Nachricht-----
Von: Tab Atkins Jr. [mailto:jackalmage@gmail.com]
Gesendet: Mittwoch, 29. September 2010 21:24
An: Sascha Meyer
Cc: www-style@w3.org
Betreff: 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 Thursday, 30 September 2010 22:31:08 UTC