duplicate in CSS

Is there no way to refer to an existing rule to set a value for a new
rule short of generating a style sheet server side?

For example:

div.a {color: blue;}
div.b {color: div.a.color}

Without this type of mechanism you end up duplicating values. I
usually try to avoid duplicating data because it creates maintenance
overhead. What's the deal? This seems so obvious I don't understand
why it can't be done. Or can it? Or how is this handled?

TIA

"David Beardsley" <dbeardsleyor (AT) hotmail (DOT) com> wrote

Is there no way to refer to an existing rule to set a value for a new
rule short of generating a style sheet server side?
...

Not that I know of, though someone may
jump in and prove me wrong.

Without this type of mechanism you end up duplicating values. I
usually try to avoid duplicating data because it creates maintenance
overhead.

You are duplicating data (in CSS) but not
values (in source), or at least, you do not
have to.

e.g. java pseudocode
Color NAV_BG = new Color(#0000ff);
.....
div.a {color: <%= NAV_BG %>;}
div.b {color: <%= NAV_BG %>;}

Your maintenance for updating the color is
limited to changing a single value..

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site

David Beardsley <dbeardsleyor (AT) hotmail (DOT) com> wrote:

Is there no way to refer to an existing rule to set a value for a new
rule short of generating a style sheet server side?

For example:

div.a {color: blue;}
div.b {color: div.a.color}

Without this type of mechanism you end up duplicating values. I
usually try to avoid duplicating data because it creates maintenance
overhead. What's the deal? This seems so obvious I don't understand
why it can't be done. Or can it? Or how is this handled?

There are a couple of approaches. I use a preprocessor that generates the
final style sheet, but it seems that you're trying to avoid anything like
that. The "CSS alone" solution is to do something like this:

div.a, div.b {color: blue;}
--
Darin McGrew, darin (AT) TheRallyeClub (DOT) org, http://www.TheRallyeClub.org/
A gimmick car rallye is not a race, but a fun puzzle testing your
ability to follow instructions. Upcoming gimmick car rallye in
Silicon Valley: Toy Rallye '03 (Sunday, December 7)

"brucie" <brucie01 (AT) bruciesusenetshit (DOT) info> wrote

in post <news:a2652193.0312091602.44473342 (AT) posting (DOT) google.com
David Beardsley said:

Is there no way to refer to an existing rule to set a value for a new
rule short of generating a style sheet server side?

For example:

div.a {color: blue;}
div.b {color: div.a.color}

.blah{..common properties..}
.color1{color:red;}
.color2{color:blue;}

class="blah color1"
class="blah color2"

To expand on Brucie's post...

Your HTML elements inherit the styles that you specify. If your HTML is
created in a nice hierarchy, then your styles should inherit automatically.
Suppose you have the following (I've changed class names to be something
meaningful):

<div class="cardetails">
<div class="make">Toyota</div>
<div class="model">Camry</div>
</div>

In this case, if you had styles like this:

..cardetails { color: blue; }

Then you don't need to specify the color for class "make" because it will be
inherited.

Now, if your HTML is less hierarchical and looks like this (nothing that
says these are children of a common class)

<div class="make">Toyota</div>
<div class="model">Camry</div>

rather than applying a color to make and a color to model, create a class
that encapsulates both objects:

..cardetails { color: blue; } /* common properties */

and add that class to your HTML elements:

<div class="cardetails make"> Toyota</div>
<div class="cardetails model">Camry</div>

This approach works, but is not as friendly to work with (IMO).
Regards,
Peter Foti

"Peter Foti" <peterf (AT) systolicnetworks (DOT) com> wrote

"brucie" <brucie01 (AT) bruciesusenetshit (DOT) info> wrote in message
news:br5pd0$26hjtl$1 (AT) ID-117621 (DOT) news.uni-berlin.de...
in post <news:a2652193.0312091602.44473342 (AT) posting (DOT) google.com
.....
div class="cardetails make"> Toyota</div
div class="cardetails model">Camry</div

I was testing some pages in IE6, Moz1.3 and NN4.78
the other day when I noticed that NN dropped every
style where I had specified two classes.

Your other encapsulation method, vis.
<div class="cardetails">
<div class="make">Toyota</div>
<div class="model">Camry</div>
</div>

Is an interesting possibility..

Is there any way to apply it to table cells,
or would you have to wrap the cell contents
in <span>/<div>s or similar?

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site

"brucie" <brucie01 (AT) bruciesusenetshit (DOT) info> wrote in message
news:br5pd0$26hjtl$1 (AT) ID-117621 (DOT) news.uni-berlin.de...
in post <news:a2652193.0312091602.44473342 (AT) posting (DOT) google.com

Hi brucie!

Apologies for my poor attribution trimming in the
last post, I forgot to trim your name when I was
only quoting Peter. I will try to be more careful.

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site

"Andrew Thompson" <andrew64 (AT) bigNOSPAMpond (DOT) com> wrote

"Peter Foti" <peterf (AT) systolicnetworks (DOT) com> wrote in message
news:vteljliu16dica (AT) corp (DOT) supernews.com...
"brucie" <brucie01 (AT) bruciesusenetshit (DOT) info> wrote in message
news:br5pd0$26hjtl$1 (AT) ID-117621 (DOT) news.uni-berlin.de...
in post <news:a2652193.0312091602.44473342 (AT) posting (DOT) google.com
....
div class="cardetails make"> Toyota</div
div class="cardetails model">Camry</div

I was testing some pages in IE6, Moz1.3 and NN4.78
the other day when I noticed that NN dropped every
style where I had specified two classes.

Your other encapsulation method, vis.
div class="cardetails"
div class="make">Toyota</div
div class="model">Camry</div
/div

Is an interesting possibility..

Is there any way to apply it to table cells,
or would you have to wrap the cell contents
in <span>/<div>s or similar?

You could certainly apply this to table cells as well (though I'm not sure I
understand exactly what you mean). However, I find it generally more
reliable to apply style to the *contents* of table cells, vs. the actual
cells themselves. For example, you could do:
<table class="cardetails">
<tr>
<td class="make">Toyota</td>
<td class="model">Camry</td>
</tr>
</table>

Or you could do:
<table class="cardetails">
<tr>
<td><div class="make">Toyota</div></td>
<td><div class="model">Camry</div></td>
</tr>
</table>

etc., etc....

Is that what you meant?

"Peter Foti" <peterf (AT) systolicnetworks (DOT) com> wrote

You could certainly apply this to table cells as well (though I'm not sure
I
understand exactly what you mean). However, I find it generally more
reliable to apply style to the *contents* of table cells, vs. the actual
cells themselves. For example, you could do:
table class="cardetails"
tr
....
Is that what you meant?

No, but what you wrote made me realise I
was going about it the dumb way. And better,
it clears up my thinking on how to apply styles
in that situation.

Thanks.

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site