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
- Third-party CSS files live under
- The application’s CSS lives under
/yourAppwhere yourApp is the name of your project.
- This approach simplifies deployment because a build script can easily target a single directory in order to bundle and compress the files.
- This seems to be the most common approach but that doesn’t mean it’s the best.
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 ...
- We normally orientate ourselves by feature as opposed to technology, making this approach a compelling one.
- Global CSS needs a folder of its own because global styles by their very nature don’t belong to a module.
- This approach is more likely to suffer from the 31 CSS file limit problem, which is explained next.
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.
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.