One common question amongst my students when it comes to their CSS is “How do you keep your code clean?” While there are numerous ways to keep your code clean and very readable, there are two sure fire ways to keep it nice and clean and readable.
Use Shorthand
Get rid of any unnecessary code that is cluttering up your code. Do you use margin-top, border-top, padding-top etc. on a daily basis? If so, lose it.
Incorrect
p { margin-top: 10px; margin-right: 5px; margin-bottom: 4px; margin-left: 5px; }
You’ve got five lines of code there when you really only need one that will do the same thing.
Correct
p {margin: 10px 5px 4px 5px; }
You’re able to define information for each of the four sides (top, right, bottom, left) in a single line. The end result is something that’s much easier to read and takes up far less space. Each of the numbers represents the four sides (in this order); top, right, bottom, left.
Here are a few other examples of ways to shorten things up…
/** 3 Values - Middle defines right and left **/ p {margin: 10px 5px 4px; } /** 2 Values - 1st defines top and bottom, 2nd defines right and left. **/ p {margin: 10px 5px; } /** 1 Value - Defines all four sides **/ p {margin: 10px; }
Document Your Code
The second really really easy way to keep your code nice and clean is to document everything. This will not only help you for when you’re writing it initially but it will also save you lots of time 8 months down the road when the client asks you for changes and you have to go sifting through your code to find the bit that needs changing.
The easiest way to do this is to use comments.
/** HEADER **/ #header { width: 800px; height: 200px; float: left; background: url(../images/header.jpg); } /** NAVIGATION **/ ul#nav { width: 800px; height: 50px; float: left; } ul#nav li { float: left; height: 50px; }
For a team of designers and coders, it’s important to talk to each other regularly so that the markup is created in a consistent way, and also to create site standards. You don’t want to have 3 or 4 different coding styles on the same document, it will just get confusing. For example, if someone comes up with way to markup a tab interface for the site, documentation will keep others from duplicating that effort, preventing unnecessary code in the HTML and CSS.
Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Trust me, I’ve been there before. Your future self might appreciate reminder of how your CSS is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS. Without proper documentation you can and will spend lots of unnecessary time sifting through code and comparing different parts so it’s always best to document your code to the best of your abilities. Your comments don’t have to be kept short either, if you need to have a few sentences describing what does what, don’t be afraid to do it.
I hope this helps a little bit the next time you sit down to write some code.
About Robb
Hi, I'm Robb Clarke - a Fredericton, New Brunswick based Web Designer and Developer. I'm currently working with OrangeSprocket as one of their Front End Developers. Please take a look around my site and give the Blog a read (or the Shorts if you're looking for a shorter read about none industry related stuff) or stop by my Portfolio to see what I've been up to lately. Most importantly - don't be a stranger.