Organisation

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:

/path/to/css
  /vendor
    some3rdParty.css
    someOther3rdParty.css
  /yourApp
    some.css
    global.css
    basket.css

Notes

2. CSS in a module folder

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

/global
  /css
    resetPerhaps.css
    global.css
    etc.css
/basket
  /controllers
    ...
  /templates
    basket.html
    emptyBasket.html
  /partials
    basketHeader.html
    basketSummary.html
  /js
    ...
  /css
    basket.css
/header
  ...

Notes

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 thought

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

Chapters

  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.