Originally posted November 20, 2012
What is BEM?
BEM is a front-end development methodology that came out of Yandex — an equivalent of Google from Russia. The goal of BEM, or Block Element Modifier, is to solve common scalability problems for front end code management on gigantic sites like Yandex.
While BEM could work great for companies like Yandex, applying all the methodologies to new projects would be an overkill. Having said that, I realize that BEM methodology addresses real problems for front-end development that every experienced developer has faced.
Theory is common sense. Separate UI elements into reusable blocks, define elements of the block in context of the block, apply block modifiers to the block depending on context.
Example
.b-block {}
.b-block_modifier {}
.b-block__item {}
.b-block__item_modifier {}
The above is one of the variations of using BEM CSS class naming conventions. While this approach is lengthy, it does explain exactly what the class definition describes.
”_” is a modifier
”__” is a nested element.
”-” word and prefix/suffix separator — .b-really-long-block-name {}
History
I recommend reading History of BEM.
BEM is more valuable as a theory for new development projects than as a strict methodology. Reading history will raise questions for your own project that you may not have anticipated.
Alex Karasyov 