• Front-End Development

BEM – CSS naming convention

AdminOctober 7, 2022

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between HTML and CSS in a given project.

Great reference article about BEM: https://css-tricks.com/bem-101/

/* Block component */
.btn {}
/* Element that depends upon the block */ 
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}