By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,869 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

duplicate in CSS

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
"David Beardsley" <db**********@hotmail.com> wrote in message
news:a2**************************@posting.google.c om...
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
Jul 20 '05 #2

P: n/a
David Beardsley <db**********@hotmail.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, da***@TheRallyeClub.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)
Jul 20 '05 #3

P: n/a
in post <news:a2**************************@posting.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"

--
brucie
10/December/2003 10:24:34 am kilo
Jul 20 '05 #4

P: n/a
"brucie" <br******@bruciesusenetshit.info> wrote in message
news:br*************@ID-117621.news.uni-berlin.de...
in post <news:a2**************************@posting.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


Jul 20 '05 #5

P: n/a
"Peter Foti" <pe****@systolicnetworks.com> wrote in message
news:vt************@corp.supernews.com...
"brucie" <br******@bruciesusenetshit.info> wrote in message
news:br*************@ID-117621.news.uni-berlin.de...
in post <news:a2**************************@posting.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
Jul 20 '05 #6

P: n/a
> > "brucie" <br******@bruciesusenetshit.info> wrote in message
news:br*************@ID-117621.news.uni-berlin.de...
in post <news:a2**************************@posting.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
Jul 20 '05 #7

P: n/a
"Andrew Thompson" <an******@bigNOSPAMpond.com> wrote in message
news:nO*****************@news-server.bigpond.net.au...
"Peter Foti" <pe****@systolicnetworks.com> wrote in message
news:vt************@corp.supernews.com...
"brucie" <br******@bruciesusenetshit.info> wrote in message
news:br*************@ID-117621.news.uni-berlin.de...
in post <news:a2**************************@posting.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?

Jul 20 '05 #8

P: n/a

"Peter Foti" <pe****@systolicnetworks.com> wrote in message
news:vt************@corp.supernews.com...
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
Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.