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.
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.
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! :)