Introduction of BEM


What is BEM ?

BEM stand for Block Element Modifier , Block__Element--Modifier . It is a methodology that helps you to create reusable components and code sharing in front-end development .

It is developed by the team at Yandex .

.block {}
.block__element {}
.block--modifier {}
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__course {}
/* Modifier that changes the style of the block */
.btn--success {}
.btn--info {}

.block__element--modifier this is proper pattern of bem .

<form class="search">
<div class="search__wrapper">
<label for="s" class="search__label">Search for: </label>
<input type="text" id="s" class="search__input"/>
<button type="submit" class="search__submit btn--info">Search</button>
</div>
</form>

why use BEM

BEM Practise :