3# CSS Interview Topics

• BEM CSS
  • Block
  • Element
  • Modifier

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>