Why having multiple CSS files is a bad idea?

• Tweet

• Tweet

Just for the sake of code separation and software development paradigms, a lot of web designers and front end developers are tempted to break the CSS styling into a group of separated files based on function. Yours might look like:

• layout.css
• typography.css
• colors.css
• widget.css

While this might look professional at the first glance and generally regarded neat for small websites, the cost of it such as the unnecessarily extra HTTP requests incurred rarely compensates the effort you have made, exponentially for popular websites. The negatives far outweigh the positives.

One may argue, however, that this is more straightforward in styles classification for the ease of switching between designs or themes. Sounds terrific, but in reality the maintenance issues, particularly those added up over time and contributing to styling complexity, will arouse themselves relentlessly with this approach and are simply not worth it in most scenarios. Some of them include:

• The ambiguity of which style falls into which file is sometimes debatable and subjective developer by developer. For example, borders can be sorted in layout.css but they have colors.
• As suggested above, large sites should avoid unnecessary HTTP requests as much as possible. Separated CSS files are apparently against this optimization principle. Not only the servers, but additional download requests can also be a burden (at least a waste of time) to client browsers.
• Bloated download size of the styles as many selectors have to be repeated in multiple files because for any of them, some rules are for layout, some for typography and yet some more for colors.
• Spread CSS cascading and specificity across multiple files is more difficult to predict and manage. Hidden dependencies between files begin to nurture themselves or get lost unfavorably.
• Spread CSS styles across multiple files makes patching and debugging more difficult and time consuming because of the simple fact that you need to constantly switch between files to locate, edit or add something.
• As a result of subjectivity as well as loose discipline, team members may carelessly violate the separation rules or unintentionally bring inconsistency to the distinctions among files by introducing selectors into files in which they should not be or not best be, ruining the intended classification in the first place.

A good practice, if you insist on the merits of separating styles for different purposes, is to categorize them by the help of PHP. Let PHP handle the assortment of styles at server side, dynamically and quietly, and render a single stylesheet file to the client. This way, you not only keeps a useful structure of CSS which would come handy in future development and derivative works, some of the aforementioned bad things about this are also overcome nicely.