Clean CSS Is Environmentally Friendly

I’ve been working on making clean CSS a new habit of mine. (Like I need any more OCD habits!) Why? Clean CSS is beneficial in more ways than one, but I want to concentrate on what I think is the most important reason: the ease of finding that line of code when you, a co-worker, or even another developer needs to update that site you built six months ago. I can’t tell you how many times I’ve opened someone’s CSS to be greeted by code diarrhea.
I’ve recently completed a major website project with multiple sites that had to be interconnected and linked together with the same resources. I did all these sites with less than 100 lines code for the whole thing. How? Lets take a look:

Start Clean to Save on Energy

When first starting a new website, I always start with my basic CSS template. This template contains my CSS reset and basic sections (made with commented-out code) for my CSS to fit into. This sections include header, footer, home content and the like. These sections are ordered from top to bottom, from home to sub content. Depending on the complexity of the site, I might add or take away from these. Sections make it easy to find what I’m looking for when I have to update the site several months later.

Cut Down Waste

We all remember our first time with CSS right? We were taught to write our code like this:

#sample {
width: 123px;
height: 123px;
float: left;
margin-right: 23px;
padding: 300px;
background-image: url('images/whater.jpg');
}

I absolutely HATE this method! It wastes too much space and is too hard to read and find a certain rule or class when you have to scroll forever to search for it. Instead I prefer to take the code above and turn it into:

#sample { width: 123px; height: 123px; float: left; margin-right: 23px; padding: 300px; }

This method cuts all those lines down to just one. Beautiful isn’t it?

In addition to putting all rules on one line within in a section, I also groups these lines. For example, if I had a news section and an event section next to each other on a webpage, I’d group them like this:

/***CONTENT STYLES***/

#events { width: 123px; height: 123px; float: left; margin-right: 23px; padding: 300px; background-image: url('images/whater.jpg'); }
#events a { width: 123px; height: 123px; float: left; margin-right: 23px; padding: 300px; background-image: url('images/whater.jpg'); }
#events a:hover{ width: 123px; height: 123px; float: left; margin-right: 23px; padding: 300px; background-image: url('images/whater.jpg'); }

#news { width: 123px; height: 123px; float: left; margin-right: 23px; padding: 300px; background-image: url('images/whater.jpg'); }
#news a { width: 123px; height: 123px; float: left; margin-right: 23px; padding: 300px; background-image: url('images/whater.jpg'); }
#news a:hover { width: 123px; height: 123px; float: left; margin-right: 23px; padding: 300px; background-image: url('images/whater.jpg'); }

Easy right? This also helps in locating items when you have a lot in one section.

Small Steps make a Big Difference

Within the code itself, I use the shorthand version for as many rules as possible. Instead of:

#bkg { background-image: url('images/bkg.jpg'); background-color: #fff; background-repeat: no-repeat; }

You can easily combine it to this:

#bkg { background: url('images/bkg.jpg') no-repeat #fff; }

Combine & Conquer

My most recent habit has been to combine similar rules from different classes, and the use of parent child classes. I won’t go too much into this since this post is getting long (you like novels right?) Here’s an example:

#bannerContainer { float: right; width: 319px; height: 441px; margin-right: 5px; }
.heartBanner a { background: url('../_images/heartBanner.jpg') no-repeat; }
.ascBanner a { background: url('../_images/100Banner.jpg') no-repeat; }
.neuroBanner a { background: url('../_images/neuroBanner.jpg') no-repeat; }
.caringBanner a { background: url('../_images/caringBanner.jpg') no-repeat; }
.heartBanner a, .ascBanner a, .neuroBanner a, .caringBanner a { float: left; width: 319px; height: 107px; margin-bottom: 10px; }
.heartBanner a:hover, .ascBanner a:hover, .neuroBanner a:hover, .caringBanner a:hover { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }

As you can see, unique classes must be declared for each banner because they all use a different background (notice the use of CSS3 opacity properties? ha!) think of how much extra code you would need to type out if you didn’t combine these elements, it would double the amount of code above. As for parents and children you can pair a unique id with a shared class (great for navigation and tables) to cut out typing all that extra code!

Take the time to make your code short and clean and you’ll be thankful six months down the line when your client asks you to change that navigation for the hundredth time! Of course a lot of these is purely personal preference, but I find cutting down on waste streamlines a lot of my coding.