ansaurus

Question

CSS - how to dry up?

Answer 1

+5 A:

You could try one of the lessCSS or dotlesscss librarys available

Nathan Fisher 2010-05-24 00:56:02

I'm super into this idea. nice.

Typeoneerror 2010-05-24 00:59:22

Answer 2

+2 A:

You could create a "base class" base-text, and then just keep the colors in the "sub-classes":

div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-gold {
    color: #FED577;
}

div.base-text-grey {
     color: #D1D2D4;
}

Of course, the disadvantage is that you will have to add 2 classes to your div's instead of a single one:

<div class="base-text base-text-gold">...</div>

Justin Ethier 2010-05-24 00:56:29

Answer 3

+8 A:

Separate out the colours into different CSS classes like so:

div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.gold {
    color: #FED577;
}

div.grey {
    color: #D1D2D4;
}

and then simply apply two classes to the elements instead:

<div class="base-text gold">...</div>

Turnor 2010-05-24 00:57:05

Seems like the most obvious solution to me!

Joe Philllips 2010-05-24 00:58:00

+1, however just to point out to the OP the (hopefully) obvious point that the class names should preferably have some contextual meaning (.error, .highlight, ...) rather than the name of the color. That way someone coming along after you might have a chance at knowing where/why those classes are used.

bmoeskau 2010-05-24 01:01:05

+1 Since I was going to say something like "check out Sass," totally blowing my chance to keep it simple, which as you have demonstrated, is the way to go.

Robert 2010-05-24 01:01:44

While this is a valid answer, why put multiple classes in the markup when you could simply use the same selectors twice in the stylesheet? There's no need to change the html like that just to support this.

dustyburwell 2010-05-24 01:06:03

Answer 4

A:

You could inherit from a class "base-text" which doesn't define color.

Then you have two choices: have a style="" next to it...

<style>
div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
</style>

<html><head>[the style thingie above]</head><body>
   <div class="base-text" style="color:BLARGH"> RAWR~ </div>
</body></html>

OR

inherit from classes gold and grey too

<style>
div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.grey {
    color: #999999;
}
div.gold {
    color: #DDDD99;
}
</style>
<html><head>[the style thingie above]</head><body>
   <div class="base-text gold" style="color:BLARGH"> RAWR~ </div>
   <div class="base-text grey" style="color:BLARGH"> DADADEEEEE~ </div>
</body></html>

ItzWarty 2010-05-24 00:57:12

Answer 5

A:

Well... one thing you could do is:

div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-gold {
    color: #FED577;
}

div.base-text-grey {
    color: #D1D2D4;
}

And in each of your divs, just go:

<div class="base-text base-text-gold">This is the gold div.</div>
<div class="base-text base-text-grey">This is the grey div.</div>

Jake Petroules 2010-05-24 00:59:17

Answer 6

A:

My initial reaction is to tell you that it's probably not a good idea to specify colors in your CSS class names. At that point, it's really no better than inline CSS. You're better to go with .emphasized or .strong for the gold text, depending on your situation. And even then, you can just style and use <em> or <strong> tag. That said, how about I answer your question?

The answer is in attempting to never use the same declaration twice.

div.base-text-gold, div.base-text-grey {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-gold { color: #FED577; }
div.base-text-grey { color: #D1D2D4; }

dustyburwell 2010-05-24 01:02:47

ansaurus

tags:

views:

answers:

CSS - how to dry up?

related questions