Proposal: inheritance of styles -in the stylesheet itself-

A lot of style sheets have styles with much duplication.  For instance,
 you may have something like:

	.normalText {
		text-align: left;
		text-decoration: none;
		vertical-align: baseline;

		font-family: "Times New Roman", "Times", serif;
		font-size: 1em;
		font-style: normal;
		font-weight: normal;

		color: inherit;
		background-color: inherit;
	}

	.large1Text {
		text-align: left;
		text-decoration: none;
		vertical-align: baseline;

		font-family: "Times New Roman", "Times", serif;
		font-size: 1.2em;
		font-style: normal;
		font-weight: normal;

		color: inherit;
		background-color: inherit;
	}

	.large2Text {
		text-align: left;
		text-decoration: none;
		vertical-align: baseline;

		font-family: "Times New Roman", "Times", serif;
		font-size: 1.44em;
		font-style: normal;
		font-weight: normal;

		color: inherit;
		background-color: inherit;
	}

In the above, everything is duplicated except the font-size. 
 Duplication like this is generally bad on several levels:
--takes up a lot of extra space
--if want to make a common change to several related styles, you have
 to go in and change all of them individually; this is especially bad
 if the styles are defined in several files
--it fundamentally reflects the fact that current css style sheet
 syntax offers no way to express parent-child relationships among
 styles

What I propose for CSS is that it allow inheritance of styles -on the
stylesheet itself-.  (I am well aware of how styles inherit down the
document structure hierarchy; that is a separate issue; the discussion
 below will also touch on it.)

Specificly, you should be able to define a parent style, and have child
styles of that parent inherit all its properties unless explicitly
overriden.  The mechanism that I am proposing is simply that which is
 done in Object Oriented programming.

I propose that every style be allowed to extend from from one parent
 (single inheritance, just as in Java).  So, the above could be
 condensed to:

	.normalText {
		text-align: left;
		text-decoration: none;
		vertical-align: baseline;

		font-family: "Times New Roman", "Times", serif;
		font-size: 1em;
		font-style: normal;
		font-weight: normal;

		color: inherit;
		background-color: inherit;
	}

	.large1Text extends normalText {
		font-size: 1.2em;
	}

	.large2Text extends normalText {
		font-size: 1.44em;
	}

Unless I have missed something in the CSS spec (or a new proposal),
 there is currently no way to achieve the above.




Before submitting this proposal, I first went onto Usenet and started a
discussion; for details, see:
	http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&threadm=6221807f.02
09201302.6ac39f93%40posting.google.com&rnum=1&prev=/groups%3Fq%3DCan%2B
inheritance%2Bof%2Bstyles%2Bbe%2Bachieved%2Bin%2Bthe%2Bstylesheet%2Bits
elf%253F%26hl%3Den%26lr%3D%26ie%3DUTF-8%26selm%3D6221807f.0209201302.6a
c39f93%2540posting.google.com%26rnum%3D1

The most relevant suggestions, along with my rebuttals below, are:

1) As far as I am aware, there is no way, and it does seem a strange
omission. The way I get round it is to encode what you call the "parent
styles" as macros, then call those macros in the "child styles".  I've
written a macro processor similar to the C preprocessor, and it's what
 I use to handle all the repetitive bits of my site, including chunks
 of CSS. ----------
A macro processor as in C could do a lot of powerful stuff, but can
 also add much complexity (as it sometimes does in C).  For the
 purposes defined here, the proposed inheritance mechanism is much
 cleaner and clearer; it really does allow you to define parent-child
 relationships


2) You probably want something like this:
	p                                     { font-family: Arial, serif; }
	.large, .large-i, .large-b, .large-br { font-size: 200%; }
	.large-b, .large-br                   { font-weight: bold; }
	.large-i                              { font-style: italic; }
	.large-br                             { color: red; }
----------
That multi-line definition syntax strikes me as horrible, and I am
 puzzled as to why it was ever allowed in CSS in the first place.  It
 says that it is valid to define a style in multiple and obscure places
 all over your style sheet.  I cannot imagine how this is a robust way
 of doing things in any but trivial examples, like the above, where the
 author was nice enough to define related things in one spot.  But
 imagine that you have a more complex style sheet, and somebody else
 started adding features to your style in different parts of the sheet,
 and then a third person had to come along and debug why things were
 not working.  So, I argue that it is an unscalable approach.  It also
 is not actually defining parent-child relationships among the styles.


3) Use the parents to manipulate the children [i.e. use document
 structure, since styles inherit down the chain?]
----------
If I understood the poster correct, he was suggesting something like:

	[in style sheet:]
	  .style1 {...[some base styles]...}
	  .style2 {...[some additional styles]...}

	[in html file:]
	  <div class="style1">
		<div class="style2">
		  blah blah blah...
		</div>
	  </div>

so that document structure is used to accumulate styles on content.  I
strenuously object to corrupting document structure (which should only
 have semantic meaning) to support styles.  As far as I am concerned,
 it is a hack in CSS of low moral equivalence to all the table
 manipulation crap in old style html documents.




_________________________________________________________________
MSN Photos is the easiest way to share and print your photos:
http://photos.msn.com/support/worldwide.aspx

Received on Saturday, 12 October 2002 16:42:05 UTC