kirk bushell | Riding the wave of programmatic novelty

DRY CSS

October 23, 2008 at 11:34 PM · Posted under Blog · Tagged with css, dry

Stepping into a great framework like CakePHP or Rails, one begins to discover better ways of developing. It stands to reason that any right-minded developer should be using don't-repeat-yourself (DRY) techniques in their code, but when it comes to CSS, this can sometimes be a difficult endeavour as the more complicated a design gets, the harder it becomes to keep your CSS DRY. However, there are some simple methods one can practise in order to maintain a lack of moisture in their stylesheets. Take the below example. We have a 3-column layout, 2 of them with similar styles. This is of course a simplified example, but you should be able to take this example into more complicated designs. We're going to first look at an example of CSS that encompasses some not-so-dry styles.

.left {
  width: 200px;
  float: left;
  border: 1px SOLID black;
}
.middle {
  width: 400px;
  float: left;
  border: 1px SOLID red;
}
.right {
  width: 200px;
  float: left;
  border: 1px SOLID black;
}

Now, you should be able to see quite easily here that we have quite a bit of repeated CSS, definitely not dry enough! Let's see how we can refactor this to make it more manageable.

.left, .right, middle {
  float: left;
}
.left, .right {
  width: 200px;
  border: 1px SOLID black;
}
.middle {
  width: 400px;
  border: 1px SOLID red;
}

This is certainly looking a bit better, however - we're now looking at another issue. We now have class names being repeated. This isn't necessarily a bad thing - it all depends on how your styles need to be written in order to best make them as manageable as possible. We can't always avoid repetition. Let's try and refactor again.

.left, .right, .middle {
  float: left;
  border-width: 1px;
  border-style: solid;
}
.left, .right {
  width: 200px;
  border-color: black;
}
.middle {
  width: 400px;
  border-color: red;
}

No, this just won't do. You can see that we've done well in refactoring the actual styles, however - there's a bit of repetition now with the style names. We've also had to type more in order ot keep the border definitions DRY. However, one can go too far ;) I've done it this way to illustrate that sometimes, although your styles themselves may be drier, we've kind've gone off the beaten track by now having the names repeated and actually writing more. Let's try one last time to refactor the code. The below example is my own preferred method of style definitions.

.left, .right {
  float: left;
  border: 1px solid black;
  width: 200px;
}
.middle {
  float: left;
  border: 1px solid red;
  width: 400px;
}

Ah, much better. Obviously we have a little repetition here in the terms of the float: left style, however if we were to extract this out to write it a little drier, we'd then be repeating the style names. This then comes to the question - which is better? Repeated class names, or repetitive code? It depends on the situation. Sometimes it is more beneficial to have our class names repeated, other times it's better to repeat the code. Use your own discretion when facing these particular problems, but always try to write all your code with as little repetition as possible.

Permalink

Comments

RSS feed for comments on this post

Leave a Comment

Name (required)

E-mail (required)

Website (optional)