Naming Convention

For ease of integration and to avoid conflicts with other sites, frameworks, and libraries, most classes in Protocol are prefixed with our global namespace .mzp- for “Mozilla Protocol”.

After that, we follow a SMACSS-based naming convention with a set of prefixes to put rules into a few different categories:

Our names are all lowercase and hyphen-separated or “kebab-case,” e.g. .mzp-c-card, .mzp-c-card-title. This brings with it the potential for long kebabs of multipart, hyphenated names. Names should be as short as possible and as long as necessary. Clarity is key. If we find our names getting obscenely long and confusing we may need to revise our convention but we’re trying it this way first.

Example:

<div class="mzp-c-card mzp-has-image">
  <img class="mzp-c-card-image" src="/static/img/card-image.jpg" alt="">
  <h3 class="mzp-c-card-title">Card Title</h3>

  <div class="mzp-c-card-desc">
    <p>Lorem ipsum dolor sit amet, pri illum munere mollis at, amet senserit te vix, sint porro mei eu.</p>
  </div>

  <p class="mzp-c-card-cta"><a class="mzp-c-cta-link" href="#">Learn more</a></p>
</div>

Names should be semantically meaningful, descriptive of the element's content, purpose, or function, not its presentation.

// NO - Presentational
.mzp-c-card-large { ... }
.mzp-c-btn-blue { ... }

// YES - Meaningful
.mzp-c-card-featured { ... }
.mzp-c-btn-primary { ... }

Notable exceptions are the handful of layout and utility classes (prefixed by l- and u-) which you should only use when necessary and practical. In most cases there will be an equivalent SCSS mixin that may be preferable to adding presentational classes in your markup.

Resources