Organize your CSS

I have been looking for ways to improve my stylesheets ever since I started writing them. The first stylesheets I had written were disorganized, unstructured and when I look back at them I usually don’t like what I see in so many ways. Writing CSS is one thing, writing good CSS is another thing. I have been working on this list for a while and I’d appreciate additions and feedback!

Starting with helpful comments

A great way to start a CSS document is to start it with a comment about various styles that go into this document. If you are familiar with wordpress, wordpress requires a comment to tell what sort of theme it is and who wrote it. I encourage another set of comments that list the fonts, colors and other mandatory style choices such as font weights and border thickness around images. Here is one I did a few sites ago:

/* Fonts:
 * Header Font: Chollaunicase
 * Paragraph Font: Helvetica, "Helvetica Neue", Arial, sans-serif
 *
 * Colors:
 * background grey
 *         #CCCCCC
 *         rgba: 204,204,204,1
 * Logo Purple:
 *         #662d91
 *         rgba: 102,45,145,1
 * Nav Blue:
 *         #29ABE2
 *         rgba: 41,171,226,1
 * p grey:
 *         #4D4D4D
 *         rgba: 77,77,77,1
 * Highlight Orange:
 *         #F15A24
 *         rgba: 241,90,36,1
 * borders red:
 *         #ED1C24
 *         rgba: 237,28,36,1
 */

Getting started with a section that explains some of these choices might keep you or another designer sane later in the game if maintenance is required.

Let Eric Meyer help, please

I hardly need to explain this one if you have ever heard of or created a reset style sheet. I have yet to find a need to make any additions to Eric Meyer’s reset stylesheet and it makes everything so much easier when you have it implemented. Save yourself time and energy and use this on every project. Eric Meyers Reset Stylesheet.

Validate

Validation, not just for HTML anymore. The W3C also has a validation service for your CSS which doesn’t only help you make sure all your css is up to snuff (sorry browser hacks and css3 browser specific styling will not be valid) but it also makes suggestions based on styles you have repeated. I have used this at times to remove duplicate lines of CSS to create much leaner stylesheets. These suggestions can sometimes hinder your organization so I usually take them with a grain of salt, I am not a computer and I can not always make sense out of oddly organized CSS.

Organize those styles

I have found it very helpful to organize my stylesheets in a sort of mirror to the way I have organized my XHTML, with certain exceptions. I use a few different comments and indentations to do this allow me to demonstrate.

/*-----------------------------------------------------
    #header  //houses the .logo, .nav and .search-field
-----------------------------------------------------*/

First, I use giant comments to denote major sections of my CSS. I use the “#” selector or “.” selector to note whether the parent of this section is a ID or a Class attribute followed by the name of the class or ID tag and an explanation. I will use these for every section of my document when it is applicaable. NOTE: It is often worth while to create a miscelanious section for styles that work across the board such as fonts and other oft-used styles.

/*----------------------------------------------
    #header //houses the .logo, .nav and .search-field
----------------------------------------------*/
#header{
   background: transparent url(img/header-background.gif) 0 0 no-repeat;
   border: 1px solid red;
   float: left;
}
   .nav ul{
      float: left;
      list-style-type: none;
      padding: 0 5px 10px 0;
    }
      .nav ul a{
         font-weight: bold;
         text-decoration: none;
       }
          .nav a:hover{
             text-decoration: none;
          }

This part of my organization is where I copy the indentation from my HTML. I know that .nav is always contained in #header so for ease of reading later I will just use the same indentation I am using in my HTML elements. This way I avoid that long, hard to follow, vertical line of CSS and instead I have something indented that gives me a hint of structure without having to keep looking at the HTML. This all adds to a stylesheet that is much easier to work in.

Give your CSS some order

Since I began working on CSS I had thought there was a better way to list my seemingly random styles. I toyed with positioning properties being first or color and font properties being first but I had no real idea of why or how to list my styles. In the land or organization there is fortunately always a fall back. Alphabetize.

.header{
  background-color: rgb(225, 225, 225);
  border: 1px solid rgb(218, 16, 45);
  display: block;
  height: 20%;
  width: 20%;
}

From what had been a seemingly random lists of styles and properties, with just a little bit of alphabetization I can always quickly identify which style properties belong where without having to guess. When an entire stylesheet is formatted in such a way it makes finding the right style properties very quick and easy. This also removes the potentially random results you might obtain otherwise.

There are many advanced style techniques you can apply to a document and stylesheets can get long and at times verbose. Keeping in mind a simple set of organizational rules is something that has helped keep me sane when working with complex CSS documents. Though this is what I have found to be very effective there are a lot of different way these results can be achieved. I’d like to hear what you think and what if any of these best practices you use, or what others you find to be more effective.