Claro CSS coding standards

Claro is following the coding standards and core gates already defined for Drupal Core. However, for some parts, we have defined stricter rules on top of these rules.

Variables

We agreed to move variables that are only used by a single component to the component itself. We will define those variables in the :root scope, so they have to still remain somewhat specific to not overlap with other components. Variables that are used by multiple components will remain in the variables.css. When a variable isn't specific to an element, the variable should start with the variable type to make it easier to find the correct variable through autocomplete and skimming.

For variables that are not specific to an element, the pattern is:

([variable-type{color, font-size, size, line-height}])(-[property])

Examples:

• --color-absolutezero
• --font-size-s

And for variables that are specific to an element, the pattern is:

([element])(-[property])(?--[state])(-[variable-type{color, font-size, size, line-height}])(?--[modifier])

Examples:

• --button-bg-color
• --button--focus-bg-color
• --button--focus-bg-color--dark
• --button-primary-bg-color
• --button-primary--focus-bg-color
• --button-border-radius-size

Dimension units

Elements that should scale depending on browser font size settings should use rem as a unit for dimensions. Examples of this include font-sizes, margins, paddings, and vertical-align.

Elements that should scale depending on browser width should use % as a unit for dimensions. Examples of this include horizontal width and horizontal margin.

Elements that should not scale on any occasion should use px as a unit for dimensions. This is applicable to hairline elements including borders, border-radius, and outline. This is due to some browsers failing to render hairline elements defined with dynamic dimensions when zooming out.