10.2. Optimization vs. organization

Some of the optimization tips in this chapter go against the grain of the organization tips in Chapter 6. Sometimes, organization for humans, such as code formatting conventions and whitespace indentation, is less than ideally optimized code. It's important to strike a balance between broad-scale organization in an architectural sense so that the code is something you and your fellow humans can work with, and targeted optimizations in a technical sense so the code is optimally performant.

Indeed, even some features of CSS itself are not beneficial from a technical optimization standpoint. In particular, the @import statement is a notorious culprit, as the more imports you have, the more HTTP requests you're making, which can slow things down. However, as discussed previously, the @import rule is useful for creating modular sets of style sheet files that are easier for people to work with, or more logically organized in a file system on disk. To get the best of both worlds, many sites use specific, possibly automated build steps that take a collection of source files (of which CSS is just one kind in a web site) and put them together in a particular, distributable way, akin to a compilation step in traditional software development. The details of how to create such build systems are beyond the scope of this book, but there are a number of useful tools, regardless of whether you create a build system, that should become a familiar part of your optimization repertoire.