Write Better CSS

Writing an effective stylesheet is a very important aspect of developing any particular Web site. Developing good habits in your coding style will really make life easier down the road as you learn more involved CSS techniques. The ability to become lost in your own code becomes a bigger reality with each line you write – unless you’re writing effectively.

Comments

If you’ve ever taken any sort of programming class, you’re forced to learn the concept of ‘good comments make great code’. At first it seems like a hassle to spend your time writing out comments explaining what blatantly obvious code will do, after all, you’re writing it. You quickly learn that the point of code is not only for your benefit, but for the benefit of others who want to read it.

Coding CSS works in the same way — kind of. Comments in CSS shouldn’t be as comprehensive as programming source, but they should serve the same purpose. If someone wants to check out a stylesheet you have written, they should be able to follow along and find exactly which section they’re looking for.

A few tips

Firstly, using a commented header is always a good idea. Dating the code and providing some insight as to who wrote it is a good start. If you’re writing the stylesheet for the company you work for, throw that URL in too. Be proud of the code you write — and if you’re anything like me, you just have a curiosity to see more work done by the author of a particular stylesheet.

Another good commenting habit to get into is commenting blocks of code. If you have a group of selectors that relate closely to one another, give them a commented header such as:

/* LINKS */
a { text-decoration:none; color:#00f; }
a:hover { text-decoration:underline; }
a:active { color:#f00; }
a:visited { color:#ccc; }

Getting into this habit will really come in handy as your stylesheet grows. If you’re testing the site, and need to make a quick fix, this is a great way to quickly find the area in which you need to make the edit.

As with all documentation, you don’t want to go overboard. After all, putting in excessive comments will do nothing but increase the file size of your stylesheet and more often than not confuse your reader.

Maintaining Your Technique

The way you structure your CSS document should also follow your own convention. Once you start with a method of writing, stick with it, don’t go back and forth. For example, if you are in the habit of giving each property it’s own line, stick with that method throughout your document.

Once you become more comfortable with writing CSS, you may find it more effective to put all the properties of a particular selector on a single line. I’ve adopted this method and simply find a stylesheet easier to maintain and look at if it is coded in this manner. Using this method makes it easer to skim the document and find the specific selector you need to modify.

Using a Top Down Approach

One of the great things about CSS is one of the C’s – cascading. Keep this idea when writing your styles. If you have a table that needs styling, keep yourself organized and do something like this:

table.grades { }
table.grades thead { }
table.grades thead tr { }
table.grades thead tr td { }
table.grades tbody { }
table.grades tbody tr { }
table.grades tbody tr td { }

Notice how as you progress down the code, what is affected becomes more detailed. If you were to be an outsider reading the style, it would be quite easy for you to follow as opposed to a random order. This technique can be applied to many situations, such as lists and content within div‘s.

How Many Stylesheets Should I Use?

There are many developers that like to separate their style into different sheets that effect different parts of the site. Some like to have a sheet for layout structure alone, another for typography, and a third for site colors. Personally I don’t agree with this method. I prefer to have separate stylesheets based on what media the code is dictating. For example, this site is using one stylesheet to control presentation on screen, another sheet to control what the site should look like should you want to print it, and yet another stylesheet for any handheld devices. For me, it is much easier to make edits to the site based on what media you are presenting to. If I want to change the margins, font-family, and color of a header, I don’t want to have to open up three separate stylesheets and make edits to each. I would rather make the edit on a single line of a single stylesheet and be done with it.

Some Finishing Thoughts

It’s very easy to find yourself writing redundant CSS. Try to take a step back and look at your site as a whole, find out which elements are similar and share similar traits. For example:

/* HEADERS */
h1, h2, h3, h4 { font-family:Arial, Verdana, sans-serif; }
h1 { font-size:24px; font-weight:normal; }
h2 { font-size:19px; color#000; padding-left:15px;  }
h3 { font-size:17px; color:#f00; }
h4 { font-size:14px; letter-spacing:2px; }

Notice how the font-family was declared only once. Writing it for each header level wouldn’t be necessary, using this technique allows you to only write code for what should set each header apart from the others. You should only use this technique for similar elements, however. Setting a padding level for a header and a form simply because they’re the same value doesn’t make much sense. If you went back to change the padding on the form, you would be inadvertently changing the padding on the header also, which you probably wouldn’t mean to do.

Hopefully you’ll be able to incorporate some of these techniques into your style writing and it will make your life a bit easier when a site is acting strange or changes need to be made.