This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Tuesday, November 18, 2008

Useful guidelines to improve CSS coding and maintainability

Developing CSS code for websites with a complex layout structure can be an hard work for a web designer. But in this situation, an harder work is writing code in order to simplify the continuous maintainability process.

In this post I want to reply to all readers of this blog which in the past asked me some FAQ about this topic and illustrate some simple guidelines and tips which can help you to improve CSS coding and maintainability process following this simple rules: reduce code complexity and optimize your CSS structure.


Single or multiple CSS files?
Some developers use to separate CSS code in multiple files and import them into an external CSS file in this way:

@import "reset.css";
@import "layout.css";
@import "typography.css";
...


What is the better practice? Separate CSS code using multiple files or writing CSS code in a single file?

There is not a specific rule, but you have to do this choice each time, after an objective valuation about the real complexity of the layout structure. If layout is not so complex in order to justify multiple files, I suggest you to write all code in a single file. In fact, in this case, managing a single file is better than managing too many.


CSS table of content: it's really useful?
I often read some articles which suggest to add a table of content of the elements contained into the CSS file in order to keep an overview of the structure of your code useful to simplify the maintainability process. A CSS table of content is something like this:



I tried to add a table of content into a CSS file in different situation, sincerly with some doubt about its real utility for these two simple reasons:

1. If you have a simple CSS file you don't need to add a table of content to manage it. You can manage it without difficulties, without a table of content.

2. If you have a complex CSS file you could need one... but in this case the problem is you have to modify your table of content each time you make a change of the CSS structure. So, if your CSS structure change dramatically, you have to spend a lot of time for developing the new CSS code and updating the table of content. You work twice... Is an overview of the structure of your code really necessary ?

I think not. In general, a good approach to write CSS code is following the gerarchical order of the page's elements (#wrapper, #navigation, #maincontent, #sidebar, #footer...), so you know "approximately" the point where this element is placed on your file.

In any case, if you prefer to add a table of content, I suggest you don't enumerate CSS elements how I did in this example:



If you change the order of one or more element you have to change every time the numbering of the other elements!


Use "sections" for organizing logically similar attributes
This is a simple tip I find very useful: create “sections” in order to separate logically similar CSS attributes and use alphabetical order for listing attributes into these section:





In this way will be simpler to manage each single section with the related attributes.


Separate CSS attribute name from attribute values using tab space
Another tip to improve the readability of your CSS code is: use a tab space in order to divide the attribute name from its value:



In this way your code looks like a tabular data sheet and will be simpler to read and manage it.

If you have other useful suggests add a comment!


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

blog comments powered by Disqus
Nguyen, Lam D said...

i'm the first one, good job, Antonio!

h454n said...

nice info.

i tried to create easy reading css , but not easy as your's.

thank for share

Jitendra Vyas said...

really useful article

Bramme said...

If I have larger CSS files, I tend to include a short index along the lines of "header styles start at line 23, content at 230" or so... If I ever need to come back to the project, I can quickly look up where about the code is I need.

I agree that creating a full index is just too much hassle!

pumpkin said...

The TOC hasn't to be a compilation of every single selector you use. I divide my CSS in sections like "General page layout, Header, Menu, Content, Footer, Stacking levels..." and such, and those sections into subsections if needed. You only have to write that ones, and you'll have a well organized stylesheet, with only a bit extra work in the TOC. With this, you leave the path clearer for anyone who is going to use this in the future.

Good article again, Antonio :)

Viet Anh Nguyen said...

Thanks for your good post :)

Ben said...

I like to indent child rules, I find it clean and useful.
e.g:

#myid { }
--#myid p { }
--#myid a { }
----#myid a:hover { }
----#myid a:visited { }

(please replace -- with spaces or tabs, blogger comments dont like spaces)

princessdesign said...

I like the Tab hint! Very useful and it really improves readability.

rob said...

Thanks for suggesting it wasn't helpful to use an index. I keep seeing them from time to time and they just slow me down trying to follow and maintain them.

I like the tab idea for values, I'm going to start doing that and see how it turns out.

Ronan said...

Great to read an article advocating tabs between name/value pairs. It's much clearer, yet it's something I rarely see in others' CSS. The annoyance in practice is having to enter multiple tabs after attribute names, since no editor I know of will automatically tab out the values. Any tips?

easyOne said...

Nice article.
I agree with you on the useless of table of contents.

nasal said...

Nice article!

The tab hint is a good idea but I've noticed that if you change the IDE everything can get messed up because of different tab indents..

Personally I use tabs only to indent the proprieties but not their values (I guess that's what most people do).. And I like structuring the css following the order of the elements, it really makes everything faster to find.

Gary said...

I would also recommend using an index for your color values. It can help you remember what colors are what.

IE: Green #13ee24;
Blue #0022FF;

Doug said...

For a big site, I'd go crazy with vertical CSS rules ( too much scrolling!) I much prefer horizonal CSS rules in a specific order ( i.e. positioning first, font-stuff last):

#main {margin:5px; color:#000;}
#footer { margin:10px; color:#ccc;}

For structures, including the complete hierarchy in the rule makes things more stable and readable:

#main .nav ul {position:absolute;}
#main .nav ul li {padding:0 5px;}

#footer .contact ul {}
#footer .contact ul li {}

clarissa said...

I love the idea of tabular css, but if you've got a huge css file, wouldn't tabbed indentions just slow it down even more?

John Smith said...

Nice Template Design. I like it a lot better than your other one. Do you like min at all?

nasal said...

clarissa, there are many tools that compress your css code so you save your bandwidth, read how to do it roscripts.com

cyberkid_shekar said...

Gud job Antonio! Its really useful article to understand CSS technology in better manner. Thanks a lot. Please keep posting such articles.

Ralph said...

Thank you for this great summary to improve my own css-style. Ralph

Micheil said...

hmm... I've long used indentation as a way of organising my css, as well as splitting it into modular files.

I also use a technique where I "framework" my css, each part of the scaffold in a different file. You can read more about my process here: http://miksago.wordpress.com/2008/10/19/css-frameworks-and-why/

Fábio Z.C. said...

100% Agreeded with Doug:

"
For a big site, I'd go crazy with vertical CSS rules ( too much scrolling!) I much prefer horizonal CSS rules in a specific order ( i.e. positioning first, font-stuff last):

#main {margin:5px; color:#000;}
#footer { margin:10px; color:#ccc;}

For structures, including the complete hierarchy in the rule makes things more stable and readable:

#main .nav ul {position:absolute;}
#main .nav ul li {padding:0 5px;}

#footer .contact ul {}
#footer .contact ul li {}
"

-b7- said...

it is also advisable to not import css file from the another css file, rather add a link to your html header. This will load css files faster.

website design New York City said...

thanks ur information

it very useful

Neha said...

I am not very good at CSS coding so your article has helped a lot.

ahmicro said...

thanks so much antonio lupetti
great article and very useful.

Chris said...

As a newcomer in CSS, I can see how putting some sort of TOC for reference is very nice. Well done!

stealthgangsta said...

very nice.. i learn alot..
hope you can validate more entries

  • 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