2

Is there a way to DRY this CSS up? Only difference is color?

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

div.base-text-grey {
    position: absolute; bottom: 9px; color: #D1D2D4; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
2
  • In short, no. CSS is really good at being Anti-DRY along with HTML and XML.
    – Earlz
    Commented May 24, 2010 at 0:54
  • 1
    Instead of naming classes by what they look like, a good idea is to name them by what they are. See this: sixrevisions.com/css/css-tips/…
    – Casey Chu
    Commented May 24, 2010 at 1:01

6 Answers 6

8

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>
4
  • Seems like the most obvious solution to me! Commented May 24, 2010 at 0:58
  • 3
    +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. Commented May 24, 2010 at 1:01
  • +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. Commented May 24, 2010 at 1:01
  • 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. Commented May 24, 2010 at 1:06
5

You could try one of the lessCSS or dotlesscss librarys available

1
  • I'm super into this idea. nice. Commented May 24, 2010 at 0:59
2

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

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; }
1
  • Very nice one! I didn't know that you could define a class multiple times!
    – Peterdk
    Commented Jan 22, 2011 at 10:23
0

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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.