Our goal is to reduce collision with page styles without Shadow DOM. This is a proposal for rules that will be linter-enforced to ensure that.
Prefer class-based selectors whenever affected markup is part of a component. Prefer tag or [attribute] for markup is authored by users.
Never use tag selectors unless they are direct descendants of component markup:
brick-layout div /* Bad */
brick-layout > div /* Good */
.thing > div /* Bad */
.brick-thing > div /* Good */Namespace classes to be Brick-specific. If a component is composable (meaning users are not expected to put their own markup inside it), then be sure to make the classes specific to that component, to avoid collision with other Brick components.
.thing /* Bad */
.brick-thing /* Good */
brick-layout .thing /* Bad */
brick-layout .brick-thing /* Actually still not great */
brick-layout .brick-layout-thing /* Good */Used to both configure components and expose functionality to user markup.
brick-calendar[controls]
brick-layout [flex]