How to write super clean CSS

Everyone who works with (X)HTML probably knows how to use CSS to some degree, but not as many know how to write clean CSS. Cascading Style Sheets are probably one of the most powerful tools a web designer/developer can master. It’s hard to find a site today that doesn’t benefit from the capabilities of CSS, and with the slow arrival of CSS3 that is unlikely to change. That said I still constantly come across style sheets that could be cleaner, more optimized, and more elegant.

Who cares if my CSS is clean or optimized

There will always be people who don’t care, if it works it works, right? Why do you want to waste time cleaning up yoru CSS. Well the answer to that is twofold. The most obvious answer is that if you are not optimizing your CSS code base, it makes it larger and thus slower to load, but arguably this is a small issue for many websites and there are also automated compression tools. The second reason is far more important; messy CSS is hard to work with and wastes time and money, it’s as simple as that. The longer an unruly styles sheet grows the more unmanageable it becomes. Even if you are the only one working with your styles, you can still benefit from clean CSS. This tutorial aims to make your CSS cleaner, faster, and far more manageable, so start working towards super clean CSS.

Stop writing classes for HTML tags that already exist!

You should never have something like “main-header” in your styles for a title you plan on using throughout the site.

Avoid this:

.main-header {
     color:#green;
}

Do this instead:

#content h1 {
     color:#green;
}

This is cleaner and less confusing. This goes for all the HTML formatting tags. Also many web editors can apply header tags allowing a user to format pages nicely.

Here are some more examples:

#content strong { color:green; }
#content p { color:blue; }
#content em { font-weight:bold; }
#content blockquote { margin:auto 20px; }

Remember you can style any HTML element, so before creating a custom class, ask yourself this, “is there a way I can style an HTML element instead”.

Make use of the body tag

The body tag is another sometimes overlooked HTML tag that you can style. It can save you from declaring many styles over and over again throughout the stylesheet. Think about the style attributes that will be used the most throughout the site. Things like font-family, font-size, background-color and background-image. Declare your main font in the body tag, there is no reason to declare it anyway else. If you have a secondary font for headers then declare those in your header tags.

An example:

body {
     font-family:Georgia, "Times New Roman", Times, serif;
     font-size:12px;
     color:#615a44;
     background:#f8eedb;
}

Redundancy and duplication, group your selectors

This area is one of the biggest offenders for messy CSS, it’s also the place that can reduce the complexity of your styles the most when done right. If you are using the same font for all your header tags, then there is no reason to declare them for each and every header tag. The same holds true for any other common styles.

Avoid this:

#content h1 {
     font-family:Verdana, Geneva, sans-serif;
     color:green;
     font-weight:normal;
     font-size:20px;
     margin:10px 0 0 10px;
}

#content h2 {
     font-family:Verdana, Geneva, sans-serif;
     color:red;
     font-weight:normal;
     font-size:16px;
     margin:10px 0 0 10px;
}

#content h3 {
     font-family:Verdana, Geneva, sans-serif;
     color:blue;
     font-weight:normal;
     font-size:14px;
     margin:10px 0 0 10px;
}

Do this:

#content h1, #content h2, #content h3 {
     font-family:Verdana, Geneva, sans-serif;
     font-weight:normal;
     margin:10px 0 0 10px;
}

#content h1 {
     color:green;
     font-size:20px;
}

#content h2 {
     color:red;
     font-size:16px;
}

#content h3 {
     color:blue;
     font-size:14px;
}

Now if you want to change the font-family or margins for all your header selectors you can easily do it in one spot instead of three. Your CSS is also now faster and easier to maintain. When building out your styles think about what is redundant and how you can consolidate that redundancy into as little CSS as possible.

Shorten your CSS

This one is subjective, but try using short-hand CSS and declare all attributes at once. It’s faster to type, takes up less space and with time will be easier to read.

Avoid this:

     background-color:#000;
     background image:url('images/my_cool_picture.png');
     background-repeat:no-repeat;

Do this:

     background:url('images/my_cool_picture.png') no-repeat #000;

There’s a lot of CSS where you can short your declarations. In some cases you may want keep CSS declarations broken up for clarity, I find I tend to do this with font declarations, but use your discretion on this one.

More examples of short-hand CSS

You can declare font-size, line-height and font-family in one line.

     font: 14px/20px Georgia, "Times New Roman", Times, serif;

You can declare border-width, border-style and border-color in one line.

     border:solid 1px #000;
     border-left: 1px solid #000;

Margins and Paddings can also be done in one line. To remember think of a clock start at 12 going clockwise top, right, bottom left.

     margin:5px 2px 12px 2px;
     padding:5px 2px 12px 2px;

If you want to get really fancy and you have equal margins or paddings on top and bottom, and left and right you can do this.

     margin:5px 2px;
     padding:5px 2px;

If all sides are the same you can specify a single value.

Watch the scope of your styles

Try not to write styles that affect every HTML tag unless you absolutely want those style attributes applied throughout the site as a default style. Instead break down your CSS into manageable chunks. If you have different kinds of headers in your content than in your side bar then limit the style to that element.

Avoid this:

h2 {
     color:green;
}

Do this:

#content h2 {
     color:green;
}
#sidebar h2 {
     color:blue;
}

Now you have different h2 styles without custom classes or overriding anyone else’s styles.

Short hand colours

You can even specify some colours short hand. If the first three characters repeat themselves you can omit three of them. For example, black and white are #000000 and #ffffff.

Do this:

#content h1 {
     color:#000;
}

Always improving your style

CSS is something you can constantly improve. Over the years I have seen mine get better and better and as CSS3 is introduced into the mix things will only get better. A lot of the basics you apply here will carry over. If you have any of your own CSS time savers or tips, please post them in the comments section.