BEM: The Good Parts


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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: