Conventions

MaintainableCSS has the following convention:

.<module>[-<component>][-<state>] {}

Square brackets are optional depending on the module in question. Here are some examples:

/* Module container */
.searchResults {}

/* Component */
.searchResults-heading {}

/* State */
.searchResults-isLoading {}

Notes:

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.