Which approach is better to write CSS code? In general I always prefer to use a methodic top-down approach I want to present you in this post. I called this process Four Bubbles Model. The model is based on four progressive phases that helps you quickly develop CSS files and maintain a better control of code you’re writing. The following picture illustrates the four main phases that compose the model:

CSS Four Bubbles Model

This model is thought to help web designers develop optimized, simple to maintain CSS files, minimizing the number of classes and avoiding redundant and inconsistent declarations. The following paragraph contain a quick explanation about each single phase.

HTML standard elements

The first phase of the model concerns the reset and redefinition of browser styles for HTML standard elements. For the reset I start adding only a small set of elements that I’m sure to use in my pages, gradually adding new ones when I need.

body, h1, h2, h3, p, ul, li, form, input{
    border:0;
    margin:0;
    padding:0;
}
ul{list-style:none;}

I follow the same approach to redefine HTML standard elements. For example, here is the basic set of HTML elements with which I start:

h1{...}
h2{...}
h3{...}
p{...}

a:link{...}
a:visited{...}
a:hover{...}
a:active{...}

input, textarea{...}
...

<p> for paragraphs, <a> for links, <h1> to define the title of your posts, <h2> to define subtitles and so on.

Main sections

The second phase of the model concerns the definition of the main sections that compose the structure of HTML pages. The picture to right illustrates the main sections of a typical two columns layout. I always use the following standard declarations to identify each section:

#wrapper{...}
#header{...}
#nav{...}
#main{...}
#sidebar{...}
#footer{...}

Then, for each section, I define the style of its child elements. For example here is the code for the unordered list that I use for the navigation links:

#nav ul{...}
    #nav ul li{...}
    #nav ul li a:link{...}
    #nav ul li a:visited{...}
    #nav ul li a:hover{...}
    #nav ul li a:active{...}

And here is the code for the links of the footer and for paragraphs within which to add some final information about the web site (such as copyrights and so on.)

#footer ul{...}
    #footer ul li{...}
    #footer ul li a:link{...}
    #footer ul li a:visited{...}
    #footer ul li a:hover{...}
    #footer ul li a:active{...}
    #footer p{...}

Custom classes

The third phase of the model concerns the definition of custom classes for all custom elements that compose web pages. An example of custom class is the class .right that I use to align to right HTML elements or the class .feed-icon that I use with a background image for the title of RSS Feeds section.

.right{float:right;}
.feed-icon{...}

In this phase it’s frequent to add a lot of unnecessary declarations that add lines of “garbage” code into your CSS file. A typical example of unnecessary declaration is the definition of a class .title for the title of posts when you can simply use the tag <h1>.

Code optimization

The last phase of the model concerns the optimization of developed code, removing unnecessary or not used declarations, grouping properties where it’s possible and reducing the length of comments. Final steps is to make a lightweight version of your CSS file using a CSS compressor. These tools allow you to remove exceeding spaces and lines break form your code minimizing dramatically the size of your files. There are some interesting resources that compress CSS files for free such as http://www.csscompressor.com/ or http://www.cssoptimiser.com/. The only advice if you use these tools is to avoid overwriting the original source file otherwise could be very difficult to modify it afterwards using a basic editor. If you use an advanced editor like Dreamweaver this is not a problem because you can use the option “Apply Source Formatting” to revert compressed files to their original formatting.

Conclusions

How you can see the model is very simple and intuitive and I’m sure it can be very useful to help you adopt a methodic approach to CSS coding. For suggestions and improvements about this model please leave a comment.