Introduction

This document covers the in-house CSS Component standard we're using for new code starting in Review Board 4.0.

There are a few goals we’re trying to achieve:

• Encouraging designing, rather than just throwing together, the DOM structure and CSS classes for a component on a page
• Clear naming of CSS classes, without risk of collisions
• Clear and obvious rule precedence, without hacks like !important
• Ability to define components that reliably specialize or contain other components
• Accessible-first
• Consistent documentation

We leverage LessCSS to help us maintain our stylesheets, with heavy usage of mixins and LessCSS variables.

This is still evolving, and we’re exploring an iteration of our styles that will allow for better component reuse, application-specific themeing, and light/dark modes.

CSS Components

Name Format

We're using a variation of BEM that includes the BEMIT's prefixes ("categories" here), and a vendor prefix.