For developing front end , BEM is a perfect way of name your dom css name .
there is simple introduce :
.1 .block-warp-name :represent advance or abstract parent dom .
.2 .block--wrap-name__name : the block in block-wrap-name
.3 .block-wrap-name--modify : the different state of it self .
Notice : use __ – because “-” will be used in wrap block . and you needn’t use “BEM” anywhere but the place that need use .
Example :
< form class = "site-search full">
<input type="button" class="btn"/>
</form>
---------------------------------------------------
< form class = "site-search site-search--full">
<input type="button" class="site-search__btn"/>
</form>
it's so simple you can use anywhere .