Chapter 1


MaintainableCSS is an approach to writing modular, scalable and maintainable CSS for small and large codebases. You can learn it in 20 minutes and implement it immediately in your project.


A module is a distinct, independent unit that can be combined with other modules to create a more complex structure. In a living room, we can consider the TV, the sofa and the wall art to be modules.

When one module is taken away, the other modules continue to work. For example, we can sit on the sofa even if the TV breaks down. On a web page, a header, product list and menu can all be thought about as modules.


Scalable CSS means that as CSS increases in size, it's still easy to maintain. If you've ever inherited a large CSS codebase, and been afraid to make changes, you'll sympathise with this.


Maintainable CSS makes it easy to make styling changes without worrying about accidentally causing problems elsewhere.


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