Vasco Neves
Posted on August 15, 2022
What is BEM CSS?
BEM stands for Block, Element, and Modifier. It’s a CSS naming methodology to reduce the CSS footprint and maintain large CSS codebases.
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}
Block
A block holds every element inside and acts as a scope. Think of it as bigger structural chunks of your code.
<div class="card">
<img src="...">
<h2>...</h2>
<p>...</p>
<a>...</a>
</div>
Element
An element is a component within the block that performs a particular function. It should only make sense in the context of its block.
<div class="card">
<img class="card__img" src="...">
<h2 class="card__title" >...</h2>
<p class="card__description" >...</p>
<a class="card__button">...</a>
</div>
Modifier
A modifier adds additional styles to a specific element(s).
<div class="card card--dark">
<img src="...">
<h2 class="card__title card__title--large">...</h2>
<p>...</p>
<a>...</a>
</div>
💖 💪 🙅 🚩
Vasco Neves
Posted on August 15, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
html Mastering HTML i CSS za Intervju: 50 Obaveznih Pitanja i 10 Koja će Vas Iznenaditi
September 19, 2024
