7 Good Tips for Writing Better CSS

Writing your first piece of css code can seem really weird if you're used to working with tables, or just haven't written code before. In this article I want to talk about 7 different ways you can write proper and clean css code as well as streamline the process and ensure you're getting the job done as quickly and efficiently as possible.

1. Start with a CSS Reset

Writing CSS source code can become a bit mundane when you're having to write specific code over and over again just to get various browsers to display your layout the same. That is where CSS Reset's come into play. With industry leaders like E. Meyer releasing a pretty kick ass css reset stylesheet, there's really no reason to not get all of your browsers 'back to zero' and build off of it. Some people have said that css reset stylesheets aren't needed, but once you get used to the reset and what items you're coding, it becomes much easier to ensure that every browser is displaying items properly.

2. Comments are your good friends

In the spirit of keeping your stylesheets clean and easy to read, comments are going to be a great way for you to keep things structured and clean. By commenting out blocks of code, the scanning process we mentioned above becomes another 5X easier because you can scan and look for items such as the header, sidebar, content and footer code because you have each section of code commented like below.

/********** Top Header code here **********/

Doing this will not only save you time scanning but will be great for your clients when you pass along the code - they'll be able to find items easier, fix items themselves and not have to email you 5-6 times a week for simple 1-3 minute changes. The benefits of clean css code goes much deeper than making the file look pretty.

3. Indent your CSS rules for Easier Scanning

When you've got 500 lines of css code to sift through, it can become straining on the eyes. So, instead of writing out the css code like this:

.your_classname {
background: #F00;
border: 0;
color: #343434;
float: left;
margin: 0;
padding: 0;
}

You can indent the rules to make scrolling through the file and finding the proper css classes and ID's easier.

.your_classname {
background: #F00;
border: 0;
color: #343434;
float: left;
margin: 0;
padding: 0;
}

4. One Rule = One Line... Multiple Rules = Multiple Lines

Following the simple rule above, you can cut down on the clutter in your css files drastically. Below you will see the two different ways you can write your css code out - some people swear by putting everything on a single line, but I tend to believe in the above mentioned rules: one rule = one line, while multiple rules = multiple lines.

.classname { border: 0; }

.classname {
background: #0F0;
border: 0;
color: #454545;
float: left;
margin: 0;
padding: 0;
}

5. Learn (and use) Shorthand Code

Shorthand css code will allow you to speed up the writing process, cut down on clutter in your stylesheets and will allow you to find things much easier. So, why do so many people still write out their css in a long hand format like this?!?!

.classname {
margin-left: 1px;
margin-right: 2px;
margin-bottom: 4px;
margin-top: 1px;
}

Writing the above code in shorthand format allow things to look so much cleaner. Shorthand code also follow the clockwise writing format - so each number (as seen below) goes like this: top, right, bottom, left.

.classname { margin: 1px 2px 4px 1px; }

6. Alphabetize CSS code for easier reading

This is one tip that I've just come to realize is actually worthwhile and one that I'm beginning to use on a daily basis when writing css code. Alphabetizing your rules will allow you to easily jump in, find the proper line of code you need to edit, change it and move on. Check out the code below and see how the beginning letters of each line go in alphabetical order, which allows you to easily scan and find the proper line. Looking for font-size? well, you know where F comes in the alphabet, right? So finding it in these lines of code will be much easier.

.classname {
border: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin: 48px;
padding: 0;
position: relative;
z-index: 101;
}

7. Keep Class and ID names easy to follow

There's nothing worse than going to edit a piece of code, only to find that they named their css code like this:

.wackyblueline5 { ... }
.leftsidesection { ... }
#bodyleftcurve2 { ... }

Picking the proper naming structure for your css classes and ID's can help you dig through your stylesheet files as well as your html files, to edit the code. I would recommend sticking with names like this, which keep things clear and easy to understand:

.sidebar-title { ... }
.postwrap { ... }
.main-navigation { ... }