Avoiding CSS Redundancy—Two Options

Any web developer who has written more than a beginner’s amount of CSS quickly realizes how easy it is to end up with redundant styles. Even with limited time to refactor, there are small things you can do to make CSS more maintainable and practical.

The Problem

Let’s say you have a particular accent colour and that colour happens to be standard red. You use this red for your links, h2 and h4 (the other headings use another corporate colour), and in the blog section of your site for the “date posted” line (which has the class “blogdate” added by your CMS). It’s common to see the following, typically spread out so that the redundancy is not immediately obvious:

a {color: red; text-decoration: none; border-bottom: 1px solid red;}
h2 {font-size: 2.5em; letter-spacing: -1px; color: red;}
h4 {font-size: 1.5em; font-weight: normal; color: red;}
.blogdate {font-size: 0.8em; color: red;}

There’s no good reason to declare “color” that many times.

Solution One: Object-Oriented CSS

OOCSS is better described by people other than me. Have a look at this slideshow and explanation by Nicole Sullivan who coined the term: OOCSS Slideshow. I personally think you can take so-called Object-Oriented CSS too far (and I think Nicole would agree that some people misunderstand and over-granularize), but let’s face it: the main principles are solid and have a lot of support in the web dev community. You don’t generally get that much support for a half-baked idea.

Anyhow, to get to the point: for our small example, the OOCSS approach is to take the color and put it into a reusable class, thus:

.accentColor { color: red }

The Benefit

Simple, elegant, and easy to follow when site maintenance or re-theming comes along. Client tells you they’re done with the red and want it to be orange? Update this one ‘color’ statement and the entire site is updated.

It is highly important to NOT call the class something like “red”, because “.red { color: blue; }” is something you may have to deal with in the future.

The Drawback

You will add this class to every element that needs this color. Now, this is not ALWAYS a drawback: if you pick a proper classname, it could make the code even more readable. But personally I’m not a fan of class-itis. If you take OOCSS to extremes, you will end up with HTML elements with 5 classnames, which can create maintenance problems of its own. That said, I use a sizeable chunk of OOCSS on every project.

Option Two: Selector “Stack”

Instead of filling tags with classes, simply create a “collector” rule and add to it as needed (subtracting that style from the original rule). The original example gets its color treatment refactored to:

a, h2, h4, .blogdate { color: red }

The Benefit

CSS had this type of grouping in mind from its inception. And it’s useful. In some cases it’s patently obvious how much sense it makes: for example, all CSS resets (a topic of debate itself) use exactly this kind of grouping because it makes less than zero sense to apply a class to every piece of markup that has been “reset”. It’s the most un-CSS thing you can imagine.

The Drawback

It is simpler and more intuitive to add “class=”accentColor”” to an HTML tag than it is to remember to add a selector to an existing CSS stack. Also, new content can arbitrarily use this color. Let’s say I’m writing a blog post and I decide I want to emphasize my text in its current way (ie. italics) as well as jump out even more boldly in the accent red. I can write “<em class=”accentColor”>phrase</em>” without skipping a beat. Impossible with stacked selectors.

The Inevitable Conclusion: Use Both

If you’re experienced with CSS I hope you are already combining both. If you’re new to CSS, be mindful as you write your CSS so that you can avoid writing rules like those at the top of this post. Given the original bad example, what would I personally do? I hope the answer to that was obvious:

a, h2, h4, .blogdate, .accentColor { color: red }

I don’t see the value of specifying the “accentColor” class every time I want to use that color. Or in other words: my links, certain headers, and blog date are an accent color. To add a class to their tags is like putting a sign saying “door” on a door. But since you can reasonably expect to want that accent colour for one-off elements or at unexpected times, it’s also valuable to have it available as a utility class.

Leave a Reply