Merge pull request #149 from mobify/new-class-namespaces

Add `pw-` and `qa-` classname prefixes

Author: jeffkamo

CHANGELOG

@@ -1,3 +1,5 @@
+# To Be Released
+    - Add new classname prefixes to CSS documentation: `pw-` and `qa-`
 2.7.4
     - Add links to alternative CSSComb text editor plugins
 2.7.3

css/class-naming-conventions/readme.md

@@ -286,6 +286,8 @@ Prefix | Purpose | Location |
 `.c-` | Component classes: this includes the root component (typically the class that defines the component itself), sub-component class, and the modifier class. [See above](#component-oriented-naming) | Project's component directory |
 `.t-` | Template classes: These class names are declared as the `template` in the corresponding [view](https://mobify.atlassian.net/wiki/display/PLAT/Views). Example template classes include: `.t-pdp`, `.t-home`, `.t-category`. | Project's template directory |
 `.u-` | Utility classes: these are meant as one-off, strongly opinionated, high specificity overrides for very narrowly defined styles. | Project's `/styles/utilities` directory |
+`.pw-` | Progressive Web classes: these classes are reserved as styling hooks for React components built into Mobify's [Progressive Web SDK](https://github.com/mobify/progressive-web-sdk) | These classes are located either in the SDK component's source directory in the SDK, or in a Project's theme directory. |
+`.qa-` | QA classes: these classes are reserved for, and used as selector hooks for tests (unit tests, integration tests, etc.). These classes are **not meant as styling hooks**, so no CSS should be applied to any `qa-` classes! | In a project's test directories. |
 `.x-` | Classes that start with `x-` are considered global states or document states. That means these classes should only be applied to the `html` or `body` element. Example states include `x-ios`, `x-portrait`, `x-retina`, `x-header-is-sticky`, etc. | *varies* |
 `.m-` (*) | Desktop embedded mobile markup classes: these are classes that we will use if we author Markup that is intended for clients to embed onto their desktop pages, but is for mobile content. | *n/a* |
 `.js-` | Javascript classes are used exclusively by scripts and should never have CSS styles applied to them. Repeat: **Do NOT** style Javascript classes. | *n/a*