Module

• small component

• usually exists multiple times on a website

• e.g.: Card, Accordion, etc.

  • .m-card

  • .m-accordion

• can also contain dashes: .m-hero-image

• Can contain other modules

Submodule

• a module can contain submodules

• a submodule always belongs to one module

• e.g.:

  • .m-card__title

  • .m-accordion__body

• Only one level of hierarchy

  • FALSE USAGE: .m-card__title__icon

  • CORRECT USAGE: .m-card__title-icon

• Usually, submodules are children of a module, BUT:
  Sometimes also with a containing element makes sense to use this logic, like:

  • .m-logo (svg or img-tag)

    • .m-logo__link → PARENTMODULE (link containing the image)

  • .m-card

    • .m-card__container → PARENTMODULE (e.g. element, where you define the grid)

• Ordering

  1. Module Styles

  2. Submodule Styles

  3. Parentmodule Styles

• Can have modifiers too:

  • .m-card__title--green (maybe better with a utility class .m-card__title.u-green)

Layout

• large component

• Usually once per page

• e.g.: Body, Header, Nav, Footer, etc.

  • .l-body

  • .l-header

  • .l-nav

  • .l-footer

  • etc.

• Can contain submodules (~sublayouts) like:

  • .l-body__inner

• Can contain modules

• Usually doesn’t contain other layouts

• Can have modifiers too:

  • .l-body--home

Utilities

• utility classes are used for stuff like style changes on different elements (= limited specific styling)

• e.g.:

  • .u-grid (display: grid;)

  • .u-center (text-align: center)

  • .u-red-upper (color: red; text-transform: uppercase;)

  • .u-text (max-width: 80ch;)

• can have modifiers too:

  • .u-grid--2

• can have subutilities too:

  • .u-grid__item--v-start (align-items: start;)

Utility example

Example SOLUTION: .u-small

Headings

Following classes are also some sort of utility class, but they also help to prevent breaking the title hierarchy.

• .heading-1

• .heading-2

• .heading-3

• .heading-4

• .heading-5

• .heading-6

<h3 class="heading-1">
I'm a H3 with the styling of a H1
</h3>

Style them always side by side with the tag:

h1, .heading-1 {
// YOUR STYLING GOES HERE
}

Modifier

• represents a minimal difference to another Module, Layout or Utility

• E.g.:

  • .m-button--black (background-color: black; color: white;)

  • .u-limiter--large (width: 2560px;)

  • .u-grid--2 (grid-template-column: repeat(2, minmax(0, 1fr));)

States

• classname mostly used for js state changes

• E.g.:

  • is-visible / is-hidden

  • has-visible-children

  • has-open-nav

Sidenote:
CSS Property ordering (borrowed from idiomatic CSS)

• Positioning

• Display and Box Model

• Colors and Typography

• Other

.m-module {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 5rem;
	height: 2.5rem;
	margin: 1rem;
	padding: 1rem;
	font-family: system-ui;
	font-size: 2rem;
	line-height: 1.3;
	color: salmon;
	transform: scale(2);
	opacity: 0;
	transition: transform .25s ease-in-out, opacity .25s ease-in-out;
}