Clear Focus Designs

Have you ever considered the structure of your stylesheets? With a little effort, you can simplify maintenance and make it easier for others to read your css. Here are a few things that I’ve picked up along the way that I’d like to share:

Table of Contents

Similar to how a book is organized into chapters you can do the same with your CSS. Put the table of contents, which is basically a run down of the structure, at the beginning of your stylesheet. At a glance anyone looking at your code can get an idea of the overall structure:

/*
Table of Contents:
global
page Structure
nav
headings
link Styles
text Styles
inline Imgs
tables
forms
extras
*/

Sections

If you’ve ever had the unfortunate task of making changes to a 1000+ line stylesheet, you know that swimming in code can be overwhelming. Well, there’s a nice technique to visually separate the code into logical sections that are searchable. Note: Having = in front of each section allows you to target that section and not bits of your code when you do a search. Very helpful.

/* -----------------------------------*/
/* ---------->> =global <<------------*/
/* -----------------------------------*/

…all global styles go under this section

/* -----------------------------------*/
/* ----->> =page structure <<---------*/
/* -----------------------------------*/

…all page structure styles go under this section

Do this for each section listed in your table of contents.

Indentation

It’s also helpful to visually show parent sibling relationships when scanning code. I’ve found that it’s best to stay within 2-3 levels or it can quickly get out of control. Below is an example:

#nav {
float: right;
margin: 1px 20px 0 0;
}
    #nav li {
    float: left;
    padding: 0 20px 0 0;
    }
        #nav li a {
        text-decoration: none;
        font-size: 1.4em; 
        color: #f3f3f3;
        float: left;
        display: block;
        padding: 22px 0 0 0;
        }
        #nav li a:hover {
        color: #7da5b7;
        }

It’s now very clear that #nav is the parent and each indented selector represents a sibling.

You can also use indentation to show other relationships. Below, cite and .quote share the same rules except for clear: right;. To easily show this exception, try using an indent.

cite, .quote {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
    .quote {
    clear: right;
    }

Multiple Stylesheets

Another way to organize your css is to separate a single stylesheet into say 2 or 3. You could do it by organizing it into layout.css, type.css and color.css. The organization benefits are clear but there are some drawbacks. One, calling multiple stylesheets increases the number of server requests. For larger sites with heavy traffic, the additional server requests can hinder performance. Two, having multiple sheets can become overwhelming when doing edits.

Hopefully I’ve given you some new ideas on how to better structure your css. Not only will you benefit by saving time (and your sanity) but so will others who read your code.