This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Saturday, April 5, 2008

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

blog comments powered by Disqus
Anonymous said...

Interesting post! Thanks!

Steve said...

Love the site. Today's blog is helpful as always...

Antonio said...

@steve: thanks for your support!

subsomatic said...

Great post! I take a very similar approach myself but always leave the logo as an actual image so that it will show if the css doesn't load (for whatever reason). What are you thoughts?

niobevulpes said...

"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"

You could always overlay a transparent gif/png with same width/height in the header that links back to the top domain.

Ijajaja said...

Useful post!!! i am always one of ur subscribers ;) keep doing ur great job!!!

Fiona said...

Nicely said! I use this top down approach too and I find it really helps me to keep my code clean and simple.

Anonymous said...

Although I agree with your top down approach, some of your code examples are misleading to beginning css coders.

You have multiple block level elements nested in your p tag for the blog post. p tags should not contain block level elements.

Not so much of a big deal, but it is good usability to have your main logo link back to your home page.

It's fine to cut off the fat from your code, but not to the point that it becomes invalid.

Love the blog. Keep up the great work.

Ashish Jain said...

Nice post. CSS is suppose to make life simple.

Alessandro said...

Ottimo lavoro Antonio

MaFiAMaX said...

Really nice post. I love CSS, i love your posts about CSS :-)

Enrico said...

Really excellent... wOOrk as usual! ;)like both the content and the presentation: keep up and you'll have enough material for a good book.

Speaking about print: what about a cleaner print css? (hint: ALA)
I usually print out the articles i like, and I think I'm not the only one...

RC Pop Art said...

This is super duper helpful. The more I work in CSS, the more I'm learning about the internet as a whole. I started as Flash Guy and really had no interest in ecommerce sites. Now however, I have found a new appreciation for those Graphic and Web designers that work exclusively in this field.

My new xhtml CSS based site is set up very much like this tutorial.

Shameless plug:

http://www.rcpopart.com/html_new/blog.html

t said...

re the Home page image not allowing a link - if you were to redefine a link style like this

#header a {
display:block;
background:url(logo.png) no-repeat;
height:60px;
width:60px;
}

Then call it in the HTML like this...

<div id="header">

<a href="/" title="Back to home page"></a>

</div>

You've created a clickable logo. You would probably want to give it its own class or wrap another div around it, #logo for instance, to stop any other links in #header behaving the same but this would be a very simple way to fix that problem

Orry said...

Only thing I can see wrong is overuse of H1. That's not exactly good for SEO purposes - there should be exactly 1 H1 tag on a page - use H2s for any other top level headings.

Dustin said...

I have used this technique for years, but now it's nice to have an actual name for it with a good reference.

James Abney-Hastings said...

I really like seeing the different ways people write their CSS. I think your top down approach is fantastic, especially for complex sites or sites with many people working on them.

Gianluca S. said...

I agree with Orry.
I prefer using at least h1 h2 h3 to have a better page structure even with no CSS applied.

However I'm still looking for a good coding workflow, and your approach seems really good. Thanks!

fubiz said...

Thanks for the good tips. Nice template.

Lex said...

Wow, this is similar to the technique i was using, taking advantge of specificity and the cascade instead of creating classes and id's everywhere.
I also use classes in the body tag to declare styles to specific elements in the same "section".
Great post!

Anonymous said...

It's always interesting to have another points of view.

Great contribution, thanks and keep up the good work

Thanks!

Maddy said...

Simple, Crispy and very useful buddy, Keep gooing!

Renee said...

Thanks for all the tips! When I did my first CSS file, 6 months later I went back and eliminated nearly half of it. This provides a simple, concise way to approach css coding.

Melinda said...

Thanks! I always love your tips - so clear and always the Occam's Razor approach.

vivab0rg said...

Great post, made me add you feed to my Google Reader. Keep up the good work!

Zakopane kwatery said...

Great post! Thanks!

uttam kc said...

really nice post. do you have any other post??
uttam kc
kathmandu Nepal.

eleon01 said...

Thank you so much, your blog has been full of learning experience.

dorsey said...

wow, that is great post. it is very easy to understand. I will implement it during my website designing.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News