Code standards: CSS naming

The status of this document is currently Request for Comments.

Naming standards

Codidact CSS uses atomic classes and components.

Atomic classes

Atomic classes are named with .has-[Property]-[Value]. Property names are either single words or multiple, separated by a dash ("-"). They override a specific property with a specific value.

Examples:

.has-color-red
.has-font-size-5
.has-display-none

Modifiers (e.g. class is only applied on mobile) are specified by adding __[Modifier] to the default class name.

Examples:

.has-font-size-5__sm
.has-display-none__lg

There are these modifiers:

• sm - small screens only (32rem)
• md - medium screens only (56rem)
• lg - large screens only (72rem)
• h - only on hover

Components

Components are complex and repetitive design parts, designed to solve a specific problem. A component can consist of one or multiple elements, which must not exist outside the component. A component and all it's elements can be modified using modifiers.

Components' names follow this pattern: .[Component]. If a component's name consists of more than one word (e.g. button list), it's words should be separated with dashes ("-").

Examples:

.modal
.alert
.button-list

Elements

Elements' names follow this pattern: .[Component]--[Element]. If an element's name consists of more than one word (e.g. close button), it's words should be separated with dashes ("-").

Examples:

.modal--header
.modal--footer
.modal--close-button
.button-list--item

Modifiers

Components and elements can be modified only using modifiers. They follow this pattern: .is-[Modifier]

Examples:

.alert.is-danger
.modal.is-with-backdrop
.button.is-active