inherit property

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 }

Also we can go further and say something like following:

     .s1 { color: green }
     .s2 { border: 1px solid inherit-from ( .s1 color ) }
     .s3 { background-color: inherit-from ( .s2 border ) }
     .s4 { background: inherit-from ( .s2 border ) }

Of course it requires more complicated parser, but I think it is
possible. The parser should copy adequate (?!?!?) values from inherited
property. Not the value with same name, but the value with the same
meaning. But it becomes really, really complicated.

If the point symbol is not reserved for other use, it can be used
instead of inherit-from property:

     .s5 { color: .s1.color }
     .s6 { color: .s2.border.color }

Currently CSS "uses" the dash ('-') as a "hierarchy delimiter"
(border-color, border-left-style, etc.). So it can be used here without
any confusion (and probably with blessing from all CSS parser developers):

     .s7 { color: .s2-border-color }
     .s8 { border: .s2-border-width solid .s1-color }

I think it's more simple and more readable. But the dash may occur in
style name (and here, we are killed slowly and painfully from angry
crowd of web developers). I think it looks like some kind of namespace
delimiter?!??!?!

Also, we can simply remove clause "inherit-from":

     .s9 { color: .s1 }

The property with the same name (.s1.color) should be used. I think the
last example is basic functionality, that should be implemented in CSS.
Basically, the parser should make a copy of current value of the same
property in the ancestor style.

If the ancestor style has no value for inherited property, then the
property in derivative style also has no value.

If the ancestor has part of values (resulting from usage of dash), then
derivative should inherit only these values.

     .a1 { border-color: red; border-width: 1px; }
     .a2 { border-style: solid; }
     .d1 { border: .a1; border: .a2; }
     .d2 { border: .a1, .a2 }

Received on Tuesday, 8 November 2011 12:23:55 UTC