My UI design website, built with Middleman.
This project uses BEM (Block, Element, Modifier) principles for structuring and naming CSS classes. I also use namespaces to communicate class intent.
The BEM naming convention follows this pattern:
.block {}
.block__element {}
.block--modifier {}
All CSS classes belong to one of three types, each with its own prefix:
c-for components (distinct, self-contained UI concepts)l-for layout (non-decorative placement of components like grid, wrappers, lists, etc)u-for utilities (tiny additions and overrides, usually with a single purpose)
BEM and namespacing together looks something like this:
.c-component {}
.c-component__element {}
.c-component--modifier {}
.l-layout {}
.l-layout__element {}
.l-layout--modifier {}
.u-utility {}
Mostly inspired by Harry Roberts, read more about these conventions here: