Define prefix / namespace for styles / js

[occupant]

Problem
CSS naming and style conventions are difficult to manage without a collective understanding of how to approach alterations and additions. Additionally, namespace collision between various frameworks and contexts can collide if no rules exist to take this into account.

Proposed solution
With that in mind, I propose we adopt the following naming conventions:

Components (ie. accordions, cards) use BEM, ie. .accordion__content--small BEM has been agreed upon by the project team as a strategy for dealing with components. It is especially well-suited to minimize scope and provide a standard set of rules to extend with variants when needed.

Utilities are hyphenated when required, ie. .text-small Utility classes are not suited to the BEM convention as they are intentionally abstracted from structure. .text-white is not and should not be confined to a particular component or markup structure (as is required by BEM).

Javscript class hooks are prefixed with .js-, ie. .js-reveal__trigger For clarity, hooks for javascript classes should be kept separate from styling considerations.For example, when clicking a button turns an element blue, the javascript event modify attributes of the target element (adding a new .text-blue class for example) as opposed to inserting those styles into javascript. The javascript class itself should contain no styling (such as toggling between display: none; and display: block;).

Media query classes are prefixed with the query and two dashes, ie. .md--text-small State based utilities are comprised of a prefix followed by two dashes. This makes some sense through a BEM structure (the -- indicates a modifier). States are based on media queries, hover, focus, group-hover (state changes in child elements when the parent is hovered over).

Additional context
Another convention to further reduce scope and prevent namespace collisions would be to prefix all styles. For example, .text-white could become .ubc-text-white. I think this is still an outstanding question as to whether or not this is necessary, so I've not proposed a prefix above. If we do decide to do this, it would best be done via postcss.

[occupant]

TODO

• [x] Add code samples
• [ ] Add defined rules of practice.

[hazuremon]

Team supports this, but would like to see more example in use case.