Select Page

„DRY“ CSS

Don’t repeat yourself. Create simple and reusable css.

When using css and getting fluid in writing it, you will soon figure one of it’s dangers.
You define css rules for the one element in focus and might end up cluttering up your css with repetitive styles for every single element.
You are suddenly confronted with endless lines of css having a certain complexity and giving you a hard time to maintain.

 

Keeping it “DRY”

There are a bunch of great articles out there covering the principles of “DRY” css. The talk of Jeremy Clarke at ConFoo 2012 in Montreal, an article from Steven Bradley or the one from Alex R Chies are only a few worth checking out.

As for my part I’m going to give you a simple example on how you could start rethinking your css and how to plan your elements in a simple and reusable way. Let’s start creating DRY css.

 

The Example

Let’s imagine we have a set of two buttons, one white and one black. We gave the anchor tags of our buttons a specific class so we can apply the desired styles.

<a href="#" class="button-white">White Button</a>
<a href="#" class="button-black">Black Button</a>

Now when styling them in css you might end up doing something like this

a.button-black {
	background: #000;
	color: #fff;
	text-decoration: none;
	padding: 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

a.button-white {
	background: #fff;
	color: #000;
	text-decoration: none;
	padding: 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

Now while this is totally valid, you might figure that we have a bunch of repetitive code here.

 

Doing it “DRY”

Using the “DRY” principles the same code would look something like this

a.button {
	text-decoration: none;
	padding: 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.black {
	background: #00;
	color: #fff;
}

.white {
	background: #fff;
	color: #000;
}

And our reusable css would be applied to the anchor tags like this.

<a href="#" class="button white">White Button</a>
<a href="#" class="button black">Black Button</a>

As you can see we are setting the global styles for the button (no matter what color) once with the class “button” and setting the defined color with two separate classes.

Doing this we are able to reduce the lines of code and if we are in need of any additional button colors (or colors for any other element), all we have to do is define a class with two simple properties and give our button (or any other element) that new class.

 


 

This is just one simple example, while only touching the surface of the “DRY” principles. Getting to know the principles you will soon find that there are many benefits it brings to the plate.

If you have any questions or comments go and drop me a line, or leave a comment below

Jaime

Submit a Comment

Your email address will not be published. Required fields are marked *

19 − nine =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest