CSS - nimbletank/nimbletank-coding-standards GitHub Wiki

CSS class naming scheme

This naming scheme uses Kickoff's CSS class naming scheme

Kickoff uses a bespoke naming scheme for classnames, inspired loosely by the BEM naming scheme.

This obviously isn’t compulsory to use in your own Kickoff projects, but is documented here as guidance, and is what we use across our Kickoff projects.

/* Descriptors use camel-casing if more than one word: e.g. twoWords */
.form {
	...
}

/* ========= */

/* Child elements use single hyphens: - */
.form-controlGroup {
	...
}

/* ========= */

/* Modifier element use a double hyphen: -- */
.form {
	...
}
.form--horizontal {
	...
}

/* ========= */

/* Element state: .is- or .has- */
.is-active {
	...
}

/* ========= */

/* Sass variables use dash-case */
a {
	color: $color-primary;
}

Resources