CSS files maintenance

Maintaining CSS files is sometimes a tedious and difficult task, especially when you didn't take care of the inner organization of your style sheets. There are a few tips and gotchas for doing this that I'd like to summarize below.

Use comment blocks

Comment blocks use CSS comments to break down a style sheet in several different parts. Generally speaking, these parts are grouped together by their internal function within a CSS file. For example, CSS classes go in a distinct group, general HTML element in another one and so on. Here's an example:

/* @group HTML elements */

...

/* @end */

/* @group CSS classes */

...

/* @end */

As you can see, each group is marked up by a starting at-tag (@group), followed by a short description and then closed by another at-tag (@end). These tags serve as internal flags for a quick text search in your CSS editor.

Do not use @import

Imported style sheets have two major disadvantages:

  1. they're difficult to manage from the point of view of cascade and specificity
  2. they slow down your site performance by forcing browsers to perform multiple GET requests at once.

Use metadata

It's always useful to put some metadata information at the very beginning of your CSS files, especially when you're working in a development team where other developers may have to use your style sheets. A good example of such metadata are the initial comments put by every Wordpress theme inside the main CSS file.

Explain hacks

If you're going to use CSS hacks, just write down a brief explanation on the line (or lines) where you use such hacks. This is always a good coding practice, because when you look through your CSS after a while, you need to understand clearly what you wrote before. This is particularly useful when you're dealing with large CSS files.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

One thought on “CSS files maintenance”

  1. CSS maintenance IS easier now, once I learned (the hard way) that I MUST keep them organized while creating them. I just learned from this post, though, not to import style sheets. This might explain the troubles I've been having with site speed etc. Thank you! :)

Leave a Reply

Note: Only a member of this blog may post a comment.