By Nicholas Zakas CHAPTER 2Arranging CSS styles into structure, skins, content and other groupings
brings order to CSS. See Louis Lazarus’s “An Introduction to Object-Ori-
ented CSS”^7 for a good primer. Nicole also offers a library based on these
principles^8.
Scalable and Modular architecture for CSS
SM ACSS^9 was devised by Jonathan Snook to clearly outline the responsi-
bilities of each piece of CSS. He categorizes rules into base, layout, mod-
ule, state and theme, and each category provides a guideline as to which
properties may be used and for what purpose. There is no library that goes
along with this approach as SM ACSS is a description of a high-level archi-
tecture rather than a specific implementation.
These are just a sampling of the available architectures for JavaScript
and CSS. Do some research to figure out which architecture works best
for you. Don’t make the mistake of worrying about architecture too late —
that’s a recipe for technical debt from the start. Choosing an architecture
is a lot like laying a foundation for a house. If the foundation is strong, you
can build anything on top of it; if the foundation is weak or absent, then
the quality of the entire house is at risk.
Even if you are unable to find the perfect architecture for your project,
just pick one. Having some organization is much better than having no
organization. When you’ve decided how to structure the code, you’ve taken
an important step toward creating a sustainable codebase. Anytime such
an important decision is made, it’s a good idea to write down how it works
and why it’s designed in this way. Documenting all of this makes it easier
for new developers to come on board.
7 http://smashed.by/oocss
8 http://github.com/stubbornella/oocss
9 http://smacss.com