Re: Proposal: inheritance of styles -in the stylesheet itself-

[Sat, 12 Oct 2002 22:42:02 +0200] by way of Bert Bos <bert@w3.org>:
>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;
>	}
[...]

>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:

[snip hopelessly long url; go here:
http://groups.google.com/groups?threadm=6221807f.0209201302.6ac39f93%40posting.google.com
to read the thread]

>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".

My own, short response: writing a program is not an available solution
for the majority of page authors.  End of story.


>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.

You're mistaken in thinking of CSS class selectors as if they were coherent
"style objects."  You can use them that way if you want; but to CSS itself,
     x.y
is just an abbreviation for:
     x[class~=y]
(when the document language is HTML) and nothing more.  You can write any
style rules you want that refer to a particular class name, and place them
however you desire (for example, to take advantage of precedence).


>3) Use the parents to manipulate the children [i.e. use document
> structure, since styles inherit down the chain?]

I agree with you that this is bad design.  It's also unnecessary.


What surprises me is that no one suggested the sensible way to do what you
want... apparently, no one knows how the CLASS attribute actually works.

In your style sheet:

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

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

		color: inherit;
		background-color: inherit;
	}

	.detail {
		font-size: 1em;
	}

	.standout {
		font-size: 1.2em;
	}

	.headline {
		font-size: 1.44em;
	}

In the document:

	<H1 CLASS="headline text">Here's the headline</H1>
	<P CLASS="standout text">Here's a standout paragraph.</P>
	<P CLASS="detail text">Here's a detail text paragraph.</P>


-- 
Randall Joseph Fellmy aka Randy@Coises.com

Received on Saturday, 12 October 2002 19:02:57 UTC