A clean way to code CSS

16.05.2008

I don't know if it is the sites i am visiting but every time I want to take a look at the css files I wonder why nobody writes its CSS files in a nice and clean way. Most declarations are just listed in an endless file nobody can understand(not even the developer who wrote it.... noo you can't....stop thinking you can!).

I'm not saying that I invented the way I am proposing now. pixel2life.com uses this kind of formating on its own site and I immediately fell in love with it :-)

Indentation!!

every developer does it, it's done in every language and it helped make things clearer and more readable since.... well.. i dont' know since when... but it was a long time ago..So why does nobody do it with CSS? Just because every declaration is closed for itself it doesn't mean you can't indent them.

So here is how it goes:

1. Take a look at your html code

Let's say your html looks like this

<div id="site">
    <div id="header">The header image</div>
    <div id="body">
        <div id="content">My super content</div>
        <div id="sidebar">My widgets</div>
    </div>
    <div id="footer">Footer information</div>
</div>

2. Indent exactly the same way!

div#site {
    width:800px;
    overfloat:hidden;
    margin-left:auto;
    margin-right:auto;
    }
    div#header {
        overflow:hidden;
    }
    div#body {
        border:1px solid #333333;
        overflow:hidden;
        }
        div#content {
            padding-top:20px;
            padding-left:20px;
            width:560px;
            margin-right:200px;
        }
        div#sidebar {
            float:right;
            width:190px;
            border-left:1px solid #990000;
        }
    div#footer {
        height:37px;
        width:814px;
        margin-left:auto;
        margin-right:auto;
        overflow:hidden;
    }

This is so easy, every html/css coder can do this. I hope you can see the advantages...

No? Well:

• You will find your declarations multiple times faster
• Others will start to understand your css file

I can't think of more reasons besides that I started to code much better CSS files after starting to code CSS like this.

I think there are many other ways to enhance readability but another thing you can do is:

Divide CSS Sections

What you can do as well is divide the css sections in your css file. I usually divide the sections in three parts:

1. Tags first

On top of all write down all mayor tag-selectors like headings, paragraphs, links, tables etc. This way you have a first main styling for your site. Example:

/**
 * Tags
 */
p {
    margin-top:0px;
    line-height:14px;
}
h1, h2, h3, h4, h5, h6 {margin-bottom:2px;margin-top:2px;}
h1, h2, h3 {
    color:#9FD4FF;
    font-size:20px;
}
h4, h5, h6 {
    color:#85c440;
    font-size:12px;
    margin-top:0px;
}
a, a:visited, a:link {
     color:#85c440;
    text-decoration:none;
}
a:hover, a:active {
    text-decoration:line-through;
}

2. Go on with Class-selectors

after that you can start listing css class selectors:

/**
 * Classes
 */
.code {
    display:block;
    border:solid 1px #333333;
    background-color:#FEFEFE;
    font-family:Courier New, Courier, monospace;
    color:#333333;
    padding:5px;
}
.highlight {
    font-weight:bold;
    color:#FF0000;
}

3. Finally id-selectors

In the end, all your id-selectors can be listed

/**
 * Global Layout
 */
div#site {
    width:800px;
    overfloat:hidden;
    margin-left:auto;
    margin-right:auto;
    }
    div#header {
        overflow:hidden;
    }

I hope somebody struggling with his or her CSS files can find this useful :-)

Cheers & till next time, Guille