Top-Down approach to simplify your CSS code

What is the correct approach to design a CSS file? Today I want to return to talk about a topic very popular on my blog about which I already dedicated two popular posts (optimize your CSS files to improve code readability and write a well structured CSS file without becoming crazy). Now I want to try to reply to this question I often receive from some readers of this blog:

What is the correct approach to design a CSS file?

In this post I want to illustrate some tips which can help you to write a better CSS code using a Top-Down approach.


Top-Down approach
I think the best way to design a CSS file is using a top-down approach, in other words first defining the main sections of your layout (in general an high-level design is composed from 4-6 main section) and after defining all single elements which compose these sections. So you can proceed to write your code in a more structured way avoiding unnecessary code. In fact, defining main sections is simple and not so problematic. The "unwanted code explosion" happens when you define the detail elements. To simplify this process take a mind these two simple "rules":

- minimize the number of CSS elements
- use/redefine HTML standard tag (P, H1, UL, LI...) instead of creating new classes

For example, in your blog, to design the post title style you can redefine <h1> tag instead of defining a new class "post-title".

Define main sections
How I said, before starting to write your CSS code you must have clear in mind which are the main sections of your page layout. For example, in case of a blog with a typical 2 columns layout you can identify these main sections:

Your high-level layout is composed from these section:

1. Header (#header)
2. Main content section (#main-content)
3. Sidebar (#sidebar)
4. Footer (#footer)

Second step is identify all elements which compose each section. Take a look at the following example to have an indea about how to proceed.


Header section
A typical header section contains the website logo and the navigation bar:

You can inlcude the website logo in the CSS background property of #header element in the following way:

#header{background:url(logo.png) no-repeat;}

Someone could say: "but in this way I can't add a link to my home page to the logo". Yes, but I think this is not a dramatic issue which compromises the usability of your site. If you add a link "home" in the navigation bar is exactly the same thing. So, you can design your navigation bar using <ul> tag with a <li> element for each link you need (home, about, contact...). In this way your CSS code will be something like this:

How you can see, you don't need to define a class "#navigation-bar" beacuse your navigation bar is defined using <ul> tag in the #header section (#header ul, #header ul li). In this way your code will be clear and simpler to manage. In any case, to improve the CSS code readability I suggest to use comments to separate each single section element and indent your CSS code.


Main content section
In a typical blog structure, the main content section contains in general the body of post (title, date, text, tag...) and it can be represent in this way:

So, a good way to design it using CSS is redefining these standard HTML tag for the #main-content section:

- Post section paragraph (<p>)
- Post title (<h1>)
- Post date (<h2>)
- Post tag (<small>)

...and CSS code will be something like this:

... simple and very readable.


Sidebar
Another example: take a look at my sidebar. It contains some section which you can design in this simplifyed way, using just <h1> and <p> tag:

...and CSS code will be like the following:

I suggest to use this simple approach to all sections of your websites. I think it can help you to write a better code simplifying in the same time the complexity of your CSS files. Take a look at the following related content links to find other infos about this topic.

Related content
Optimize your CSS files to improve code readability
Write a well structured CSS file without becoming crazy