Good code is easy-to-find and easy-to-find code is well-organised. And so it follows we want our CSS to be well-organised. There are, generally speaking, two approaches to choose from, both of which we’ll discuss in this chapter.

1. CSS in a single folder

This approach puts all CSS inside a single folder:



2. CSS in a module folder

This approach puts module-specific CSS within a folder of its own:



The 31 CSS file limit problem

Whichever approach you take, be aware of the 31 CSS file limit found in versions of Internet Explorer. Internet Explorer 9, for example, ignores styles stored in the 32nd (or 33rd etc) file.

For production this is fine, because we should bundle our CSS to reduce HTTP requests. But for local development it’s better to work with source files to make debugging easier. And it’s in legacy browsers where bugs normally arise.

If you have a compilation step for local development—as would be the case when using a CSS preprocessor—you don’t need to worry. The preprocessor will bundle the files.

If you don’t have a compilation step for local development—because debugging source files is easier this way—then you may want to remedy this with one of two approaches:

1. Add an option to concatenate CSS locally

By doing this you’ll be able to mimick production and debug CSS in offending legacy browsers.

2. Use less than 32 CSS files

As you’ll probably have more than 31 modules, you can’t organise your CSS by module. Instead you’ll have to put several modules within the same CSS file.

Final note

In this chapter we have discussed two ways in which to organise CSS. Whichever approach we take, we must be aware of the 31 CSS file limit problem because it makes debugging CSS much harder in the very browsers that cause most trouble.


  1. Introduction
  2. Semantics
  3. Reuse
  4. IDs
  5. Conventions
  6. Modules
  7. State
  8. Modifiers
  9. Versioning
  10. Javascript
  11. Organisation
  12. FAQs

Want updates?

Join my newsletter to get the latest MaintainableCSS updates and my usual articles about UX and front-end development.