Introduction

MaintainableCSS is an approach to writing modular, scalable and maintainable CSS. Not only does this guide explain how to do this, but more importantly it explains why.

There’s nothing to download

This is not a library or framework. It’s a set of principles, guides and conventions to help you write CSS for small or large-scale websites.

What does maintainable mean?

Maintainable CSS can be defined as being able to make styling changes, without worrying about accidentally causing problems elsewhere.

What does scalable mean?

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.

What does modular mean?

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

If we take one of the units away, the others still work. We don’t need the TV to be able to sit on the sofa etc. In a website the header, registration form, shopping basket, article, product list, navigation and homepage promo can all be considered to be modules.

Is this for you?

If you’ve ever experienced pain when writing or maintaining CSS, then you’ll find useful information in this book. And if you work in a team, this book can serve as documentation for you and your team.

Is this hard to learn?

No. You can read this in under 20 minutes which includes the rationale behind the approach. Implementing it takes less than a minute.

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.