This blog has moved here: | FOLLOW ME ON TWITTER @woork
Wednesday, January 2, 2008

Optimize your CSS files to improve code readability

Some readers have asked to me what is the better way to organize a CSS file to optimize code readability and simplify code management.

Generally, I adopt just some simple rules and, it's my opinion, they are useful in order not to become crazy if you have to manage a CSS file for a page/site with a complex design. In this post, I discuss for simplicity a typical two columns fixed layout like this:

Step 1: redefine HTML elements
I think it's a good rule to redefine HTML elements (body, a, form, input...) in the first rows of your CSS files.

/* ------------------------------- */
/* HTML Elements
/* ------------------------------- */
html {font-family:arial, verdana, sans serif; font-size:13px;}
a:link, a:visited{color:#0033CC;}
h1, h2, h3, h4, h5, h6,
form, input, text-area{
border:0; padding:0; margin:0;
font-family:arial, verdana, sans serif;}
h1{font-size:24px; color:#000000;}
h2{font-size:18px; color:#666666;}

Step 2: define page elements
In order to improve code readability, I suggest to indent all elements but with some sagacities: if an element have just two-three attributes (for example #navbar), you can use a single line to declare all properties, otherwise it's better to declare every single property in a new line (for example see #navbar li a:link, #navbar li a:visited):

/* ------------------------------- */
/* PAGE Elements
/* ------------------------------- */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link,
#navbar li a:visited {
padding:0px 10px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
#footer a{color:#666666; text-decoration:underline;}

Step 3: define custom class
In the final section of your CSS files, you can define all other custom classes with the same rules I specified above:

/* ------------------------------- */
/* OTHER Class
/* ------------------------------- */
div.small-section a{color:#333333; font-weight:bold;}

How I said, these are only my personal suggestions and not true rules, but I think you can find them useful in order to deploy a more readable CSS file.

blog comments powered by Disqus
deltawing said...

"these are only my personal suggestions and not true rules"

Well, they are strict rules for me now :) It's become part of my coding standards.

Good job. Very sensible article.

Raj said...

gr8 job

fingerprinz said...

This is so helpful. Txs. markus

Ralph said...

Great article. I think every webdesigner should have a structure like templates.

I like your pictures, very nice.... ;)

salim said...

it,s helpfut thx man

Ozzy said...

Thanks so much, this is gonna be very useful for me in my future web projects.

chary said...

its really nice article and useful too!!

yahs_gt said...

Great job buddy..

Jorge said...

Great helpful css help for good css styling and coding.


Anonymous said...

thanks its really helps a lot

Stanley said...

O.. thx
Really good for using CSS

Sudirdjo Widjaja said...

Nice article,

it's nice to have it nicely structured and easily read

thx for the tips

Jyotsna said...

its nice and useful too!! good css styling and coding.

  • 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