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:
- they're difficult to manage from the point of view of cascade and specificity
- they slow down your site performance by forcing browsers to perform multiple GET requests at once.
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.
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.