Naming CSS class with BEM

Photo by Austin Kirk on Unsplash

Naming CSS class with BEM

BEM stands for Block-Element-Modifier, it is a methodology for naming CSS classes in HTML. The goal of BEM is to make the code more organized and easy to understand, as well as to make it easier to maintain and scale the codebase.

syntax :

<div class="block__element--modifier"></div>

for the block__element it usually you telling what's the name of the block, then tell a specific content name

<header class="header__logo"></header>

you can stop there, or you can add a modifier to it

<header class="header__logo header__logo--dark"></header>

read more detail on BEM official doc