Document naming convention and CSS style guide

[craigcook]

SMACSS-based naming using these prefixes:

• is- to indicate a current state e.g. is-active, is-collapsed (typically assigned by JS, not hard-coded).
• has- to indicate that a component contains some other specific component (think of it like a meta-state) e.g. has-submenu, has-image (may not be used very often).
• js- used as a behavior hook for for JavaScript, indicates potential for a state-change but usually doesn't have any styling specific styling other than behavior-based, e.g. js-sticky, js-collapsible.
• l- For layout-related styles e.g. l-grid-half (or something like that, we need to figure out our layout stuff; see Define general layout stuff #10).
• t- For theme styles, when a component has a alternative styles, e.g. t-dark
• c- For component names. Expect a lot of this one, e.g. c-card
• u- For utility styles, which have a broad scope and can be powerful overrides, e.g. u-inline (could get really presentational, let's be mindful here).
• qa- For testing (should have no styling, this is really just so scripts can find elements and we may not even use it much)

Also using a mzp namespace prefix, e.g. .mzp-c-card for a Mozilla Protocol card component.