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.
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
Good article, it’s a good idea to keep code clean. Grouping, in particular, helps a lot.
However, I don’t agree about the first point. For me it’s easier to read the sentences line by line.
To avoid wasting space, you can still put similar properties on the same line, like this:
div.thing {
float: left; position: absolute;
width: 80; height: 20;
color: #fff; background: #000;
}
It also helps if you always put them in the same order (first positioning, then dimensions, then margin/padding, then text properties).
To reduce the need for scrolling, you can use an editor with code navigation, like Bluefish, Netbeans, etc. That way you can access all your rules from a side panel.
Yes I always tend to put all of my rules in the same order, but for the life of me (I guess it’s just personal preference) I really can’t stand reading CSS in multiple lines.
CSS shorthand is one thing I want to learn more of. Is there any place that tells you how to do it? In other words, how will you know you’re doing it correctly?
Brad: I show how to do the background shorthand above, the only other one is the font shorthand, which you can find somewhere (Just Google it) there’s only one way really to do it right so if you’re rules show correctly, there you go
A good place is the w3c school css reference:
w3schools.com/css/css_reference.asp.
Another is the best site for beginners, maxdesign’s “selectutorial:
css.maxdesign.com.au/selectutorial/rules_shorthand.htm.
Amber, I bet you use more than you think.
What about borders, margins, paddings?
Don’t you use something like:
border: 1px solid #fff;
margin: 1em 0 0 1.2em;
padding: 12px;
Dave
Dave: You’re right I do use all of those. I’ve been so busy today I plain forgot
Nice to see I’m not the only coder who “suffers” from OCD lol.
It also makes for easier reading if you’re printing your code off.
I agree with the top down approach to css. It really annoys me when someone sticks header rules at the end of a css file. Why do they do that?
I think including the styles in a line as opposed to a list is a bit of a double-edged sword. On the one hand, a line makes for easier scrolling and jumping to specific section, but on the other, sometimes it can be difficult to see bugs or redundant rules when they are displayed in a line. So I think the best method might be to write the rules in a list while you’re developing and then use minification, which would make the css even more efficient than the example you give.
Another thing I sometimes do as well as grouping the css rules is to put an index at the top of the file with numbered sections. This is useful if your code is going to be read by someone that doesn’t have an IDE with a navigator, or someone who can’t work and IDE with a navigator
Oh and btw List-style and outline can also be shortened
outline:#00FF00 dotted thick;
list-style:square inside url(“/image/blueball.gif”);