#scss #css #web-development #frontend

BEM Convention

• block__element--modifier
• You can separate words using a -

BEM with SCSS

SASS or SCSS

• Nesting

.block {
	&__element-1 {
		&__modifier-1 {
		}

		&__modifier-2
	}

	&__element-2 {
	}
}

<div class="block">
	<div class="block__element-1 block__element-1--modifier-1">
	</div>
	<div class="block__element-1 block__element-1--modifier-2">
	</div>

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