UBEM

osokinweb@gmail.com

Yes, yet another CSS naming system. Here is nothing new, just a useful set of known practices.

UBEM is based on using two entities - utility and component. The main goal is to use most recognizable combination of letter cases and parts separators.

Component

Anatomy

<article class="SomeBlock -modifier do-scriptMagic is-stateModifier">
	<header class="SomeBlock__element">

	</header>
	<div class="SomeBlock__anotherElement">

	</div>
</article>
  • SomeBlock — a block name written using pascal case
  • -modifier — a chainable modifier written using camel case with a hyphen prefix
  • SomeBlock__innerBlock — an element written using camel case prefixed with the block name and double underscore

Prefixed modifiers

  • is- — a component state modifier (is-selected)
  • has- — state or presence of a descendant (has-error)
  • do- — a hook for using in scripts
  • Global context modifier with G- prefix. (G-logged, G-admin). If necessary you can add global context classes to the <body> tag

It's okay that prefixed modifiers looks like utilities. The main thing is that they have meaningful names, do-blockExpand for example.

Avoid

Mixing components <div class="SomeBlock AnotherBlock"></div>

Utility

Utility anatomy

<div class="media:subject-value"></div>
  • Media part is optional and used for responsive styles
  • Value part is optional and used for utility varied values
  • All the parts of a utility are written using camel case

Utility examples

Display property

<div class="d-block md:d-none"></div>

<div class="xsOnly:d-none">Something not for smallest screens</div>

<div class="print:d-none"></div>

<div class="d-flex  justify-start md:justify-between  align-stretch">
	<div class="grow-1 shrink-0"></div>
</div>

Grid

<div class="row  gap-sm lg:gap-md">
	<div class="col-12 md:col-4 lg:col-3">

	</div>
	<div class="col-12 md:col-8 lg:col-9">

	</div>
</div>

Visibility

<div class="visuallyHidden"></div>

Rectangle width and height

<svg class="rect-40-50 md:rect-48 xl:rect-56">
</svg>

Font size, weight and color

<span class="fz-400 fw-800 color-major"></span>

Anything

<div class="whatItDoesOrMeans"></div>

<div class="visuallyHidden"></div>

<div class="home:ironVapor-puff"></div>