CSS

Shadows is structured based on ITCSS, we split the framework in to several layers:

base - This is the first layer which outputs any actual CSS. It usually contains CSS resets, font imports etc.
elements - Elements contains any CSS pertaining to HTML elements such as html, table, or h1.
objects - Objects is the first layer containing class-based selectors, we prefix objects with o-. It should contain any non-cosmetic design patterns styling such as .o-container.
components - The Components layer is where the majority of the CSS will be written. Components handle the cosmetic design patterns and UI elements such as .c-table or .c-button.
utilities - The Utilities layer is reserved for styling which will take precedence over other classes. These are generally utilities such as .u-inline-block which sets an element to display: inline-block or .u-text-center which forces text-align: center.

Our CSS classes follow the BEM structure:

Some examples of suitable class names:

We should NEVER use the following class names:

We have established a CSS style guide which helps promote a greater degree of standardization in our code.