Naming in CSS can be tricky but is worth getting right.
To ensure our naming is consistent we use a naming scheme based on the SUIT methodology.
Using a naming scheme helps clarify the intent of the author as well as defining the relationships between classes. It also makes it much easier to distinguish which classes should be used solely for state, layout or as a utility helper.
/* We use a number of class prefixes to categorise our CSS classnames */
/*
* Objects are prefixed: .o-
* An object is a type of component that can be implicitly linked to an HTML tag.
* For example, the base styling for buttons or form elements.
*/
.o-btn {
...
}
/*
* Components are prefixed: .c-
* A component is any CSS module that isn’t classified as an object.
* For example a modal, listing or star ratings component.
*/
.c-rating {
...
}
/*
* Utility classes are prefixed: .u-
* These are generic, reusable classes that could potentially be used across many components
* For example, clearfix classes or an is-hidden class
*/
.u-clearfix {
...
}
/*
* Layout classes prefixed: .l-
* These are classes specific to global site layout
*/
.l-container {
...
}
/*
* Grid classes prefixed: .g-
* Any classes that help define our design grid. i.e. .g-col
*/
.g-col {
...
}
/* Descriptors in a classname use camel-case if more than one word: e.g. mySelectorComponent */
.c-myComponentName {
...
}
/* ========= */
/* Child elements are indicated using a single hyphen: - */
.o-form-controlGroup {
...
}
/* ========= */
/* Modifier classes are indicated with a double hyphen: -- */
.o-btn--primary {
...
}
Modifier classes are used to show when an object or component class is being modified slightly. Think of them as helping to define one or more extensions to your component.
A typical example is when defining buttons. Usually all buttons share common styles, that are defined using the o-btn class. However, buttons usually have various design treatments – some may have a different background colour and font-size, others may have rounded corners.
To define these different button styles we can use modifiers, allowing us to use the base o-btn class alongside a modifier that will extend those base styles.
.o-btn {
font-size: 16px;
color: #333;
}
.o-btn--primary {
background-color: Gold;
}
.o-btn--secondary {
background-color: LightGrey;
}
<button class="o-btn o-btn--primary">My Button</button>
<button class="o-btn o-btn--secondary">My Other Button</button>
We use the is- or has- prefixes to indicate state that changes via JavaScript.
Usually this is caused by an action performed by the user, but could also come from an API response or similar system level event.
/* Element state: .is- or .has- */
.is-active {
...
}
When defining Sass variables, we use dashes in the same way as in our overall class naming scheme.
// Sass variables use dashes and double dashes a similar way to our classnames
$blue: blue;
$blue--light: lightblue;
$color-primary: $blue; // variable prefixed with color to show that is it’s use
// example of component variable naming
$modal-border-color: $blue;
$modal-border-size: 1px;