Should You Use Several CSS Files Or Not?

External stylesheets are an essential feature in web development. Almost everyone building a fairly serious website uses them. However, the sticking point especially for new web developers is the number of external stylesheets to use. A typical question which they ask is this: “should I use several CSS files or not?”

The main issue behind this question is this: should the external stylesheets be included in different CSS files, or should they be combined into a master CSS file?

Now, as we answer this question, it is important to note one thing: each option has its pros and cons. To make an informed decision, you need to understand these pros and cons. That is what we shall look at. Let’s start of by looking at multiple CSS files.

Using Several CSS Files

There are three scenarios where using several CSS files is advantageous. The first is when you are implementing complex designs on your website. Several CSS files can enable you to organize your design efforts in a simple, straightforward and logical manner.

design for phones, tablets, pc Let’s imagine you are building a responsive website, and have three separate designs (i.e. for phones, tablets and PCs). Placing each type of design in a separate stylesheet can simplify your life during development. It can enable you to focus on one design at a time. Rather than look through hundreds of lines of CSS code to find and edit a specific item, you can look through fewer lines. This can make you more productive. You can link those CSS files to your web pages using conditional statements.

The second scenario is if you use external plugins on your websites. Some plugins – especially the ones for creating visual components like slideshows – have their own CSS files. In such cases, it is better to keep those CSS files separate. This makes customizing the plugin simpler. It also makes upgrading the plugin simple.

The third scenario is when creating designs which are shared by specific pages. This is common practice. For instance, you can find that certain pages on your website share features or designs which are different from other pages. In such cases, it makes sense to place the designs on different CSS files, and link them to the relevant pages.

The only downside with using several CSS files is that it can slow down your page’s loading time. This is because each file needs to be loaded. Slow loading webpages not only piss off your visitors, they can also hurt your website’s SEO. This is why using a single CSS file can have an advantage.

Using A Single CSS File

There are two possible scenarios where using a single CSS file comes in handy. The first is if all the website features can be implemented in a single stylesheet. This can happen for fairly simple websites. If a website doesn’t have complicated features (e.g. slideshows, complex drop-down menus, or a responsive design), then a single stylesheet can suffice. In such a case, using a single file makes sense.

faster loading The second is when you are optimizing a website for faster loading. In such cases, it makes sense to combine the CSS stylesheets into a master CSS file, and compress the file in order to make it load faster.

The downside of having a single file comes during website maintenance. Editing a single file can be a massive undertaking – especially if it has many lines. Imagine you have to find a single rule in 500 lines of code. It can be stressful.

So, Should You Use Several Files?

Well, it depends. If you are building a website with complex features, including external plugins or creating page-specific designs, then multiple stylesheets can come in handy. If you are building a fairly simple website, or optimizing a website for faster loading, then using a single stylesheet makes sense.

But, what do the experienced web developers do? Well, most use several CSS files during website development. At the point of deployment, they combine all of those files into a master CSS file. Even then, they keep a copy of their development website (the one with multiple CSS files) in case they need to make any changes. This seems a smart approach, doesn’t it?

Read More:

Make your pages load faster by combining and compressing javascript and css files

Challenging CSS Best Practices