Chapter 12


If you can't find an answer here, raise an issue on Github.

Can I translate this?

Yes but please cite the original (that's this site) and let me know.

What about inheritance for headings etc?

Ideally our semantic HTML matches the integrity of the visual design. Meaning that we would hope that all h1s are identical. In this case we can declare the following CSS:

h1 {
  /* etc */

However, this is rarely the case, in commercial, large-scale websites. In this case we should encapsulate styles to the module in question:

.module-heading {
  font-size: ...;
  color: ...;


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