External CSS @ the framework era

Ordering multiple external CSS files done right.

3 min readFeb 28, 2014

A few days ago I encountered a CSS problem on a site I am working on (making it responsive); despite all of my efforts, the style I specified in the style.css file did not take effect. After some testing I saw that the order of external CSS files in the head section is wrong.

After some careful consideration, and taking into account the maturity of the site, and the numerous changes that were already applied, I concluded that changing the order of external CSS includes to the correct one will surely involve breaking the precise UI we worked so hard to achieve. Thus, I’ve added a final CSS file that will host only problematic statements, and concluded that this will be fixed after the site goes live.

The real story starts when I was looking for a good, readymade explanation for the situation for my esteemed colleague who owns the site. Sadly I didn’t find one; so I had to explain it myself, concluding that all the “CSS order” manuals that appear on Google are too old / do not take into account the entire picture.

Simpler Days

In simpler times a website had a “style.css” file and good practice was to put the styles in that external file, and that’s about it. Today (and I mean for the past 3-4 years) we start projects from better starting points: a framework of some sort like Bootstrap for example, and build up from that / we use plugins that have their own styling. A good manual about the order of calling external CSS files is hard to find on Google, so this small article is just about that.

The Correct Order

1. Framework CSS files:

a. Starting with the main CSS

b. Secondary CSS (example: Bootstrap used to have a “responsive.css” in its 2.0 version)

It’s not a good practice to make changes in those files. It is harder to follow and maintain, makes it difficult to know if the problem is a framework problem or my problem and once the framework updates you can’t just replace the file with a newer version.

2. Plugins

If your site uses plugins that have their own styling, their CSS is next.

It’s not a good practice to make changes in those files. For the exact same reasons as above.

3. Your own styling

The site own style.css file is the home to your changes. This is the target for all the styles, overrides of framework/plugin CSS etc.

Remember to add useful comments to your styles, group them into meaningful chunks, etc.

Keeping to that order will ensure simple upgradeability in the future, keep things neat, and allow for easier styling and coding.