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