W3C home > Mailing lists > Public > www-style@w3.org > November 2011

Re: inherit property

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 8 Nov 2011 06:32:49 -0800
Message-ID: <CAAWBYDDxA5X=3zr2A8CudmSZLSfsc+Y0zYBLJMeBSZHk59W2bg@mail.gmail.com>
To: Райчо Райков <raycho.raykov@gmail.com>
Cc: www-style@w3.org
2011/11/7 Райчо Райков <raycho.raykov@gmail.com>:
> I was always interested why in CSS not implemented inheritance from
>
> another style.
>
> Example:
>
> ..style_1 { border-color: blue; color: red; }
> ..style_2 { border-color: inherit-from ( style_1 ); color: green; }
>
> When I search in the Internet, there are other people asking the same
> question.
>
> Main advantage is extending styles for libraries without changing their
> CSS files. In my example, lets assume "style_1" is declared in library
> from other vendor. I build my own web page(s), where I need box with the
> same border as defined in library but with different color of the text
> (green in example).
>
> If the library vendor changes border color in style_1 (or user changes
> the page theme), if I have such kind of inheritance my page will
> "follow" changes automatically.
>
> I send an email to Karen Myers (Business Development Lead, MIT) and here
> is part of her answer:
>
> -------------------------------
>
> The *technical* answer has several aspects, including:
>
>  - It is not so easy at is looks. E.g., what color does the last line
> use in this example?
>
>        .style1 { color: blue }
>        .style1 { color: green }
>        .style1 { color: inherit-from(.style1) }
>        P.style1 { color: yellow }
>        H1.style1 { color: orange }
>        H1 { color: inherit-from(.style1) }
>
>  - If it is to make editing of CSS easier (for advanced users), there
> are specialized systems such as LESS and SASS, and generic systems such
> as PHP and SSI, that can do this much better. They also have the
> advantage that they already work, and are independent of browser support.
>
> -------------------------------
>
> I know it isn't so easy to implement such thing. It's not just another
> "property". It's another way of thinking about properties. If in current
> CSS the model of properties can be called "flat", if such inheritance is
> implemented the model will become "hierarchical".
>
> About the implementation, I think if the browser can resolve which style
> should use when rendering a tag, it can resolve which style to use when
> inherit from other style. Of course, it's not a "real" answer or solution.
>
> Ms. Myers give me a good example (mine was very simple). Let's follow it
> step by step (or think as a CSS parser):
>
>        .style1 { color: blue }
>
> Now *.style1 defines text color to be blue.
>
>        .style1 { color: green }
>
> Now text color of *.style1 becomes green. We "forget" about the blue.
>
>        .style1 { color: inherit-from(.style1) }
>
> It's interesting. After this line the text color of *.style1 should
> be.... green again.
>
>        P.style1 { color: yellow }
>        H1.style1 { color: orange }
>
> Nothing special here.
>
>        H1 { color: inherit-from(.style1) }
>
> Here is another complicated situation. There are two ways to parse it:
> orange or green. If we follow the "normal" way of HTTP-CSS relationship,
> the result should be orange. But more correct (in my point of view) is
> to use explicit clause (*.style1), so color should be green. If we want
> orange, we must use:
>
>        H1 { color: inherit-from(H1.style1) }
>
> The final simplified result of our parsing should be:
>
>        .style1 { color: green }
>        P.style1 { color: yellow }
>        H1.style1 { color: orange }
>        H1 { color: green }

While the idea of reusing styles from one declaration block in another
is potentially a good idea, doing it in this way is not.  Using
selector-matching to target the block you're reusing is very fragile
and potentially verbose.  As your example shows, if the CSS changes to
split one declaration block into two, or to insert another declaration
block with the same selector, or to change the selector in a harmless
way (such as adding another selector with a comma), your linkage
breaks down.  This can quickly produce a maintenance nightmare.

It's much better to be more explicit about what you're reusing, like
what SASS does with its @mixin rule.  There, you know exactly what
you're referring to, and harmless changes to the stylesheet, like
rearranging styles or splitting up declaration blocks, won't mess you
up.  Further, you can name the mixin better, since you're not trying
to make it both a style for your page *and* a style for reuse.

I plan to try and pursue an idea like this in the future.

~TJ
Received on Tuesday, 8 November 2011 14:33:39 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:46 GMT