CSS optimization: avoiding multiple CSS files

While I was writing the stylesheets for this site, I decided to use multiple CSS files and import them via the import rule. But some nasty problems arose. First, the server-side language in use encountered some problems in merging them into a unique CSS file. Basically, it had some problems with respecting their order. Second, when I had to make some modifications, I was forced to search through multiple files in order to find the code section I did need to change. Simply put, I didn't remember easily where an X section was actually contained. Third, I noticed some performance issues when using multiple CSS files, because multiple files mean multiple GET requests.

So, avoid multiple CSS files whenever it's possible. Keep everything in a single CSS file and use CSS comments to mark up the various sections for an easier search and find action. What's more, use a consistent CSS nomenclature and write reusable code (for example, CSS classes) to avoid code duplication. By doing so, everything will be easier to maintain.

Leave a Reply

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