Clarify that qa- classes are not meant for CSS

Author: jeffkamo

css/class-naming-conventions/readme.md

@@ -287,7 +287,7 @@ Prefix | Purpose | Location |
 `.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.) | In a project's test directories. |
+`.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*