BEM: Methodology of Effective Site Development

What is BEM

BEM stands for Block-Element-Modifier. It's a way to modularize the development of pages. By breaking things into Blocks, being able to break those into Elements, and then use Modifiers on them, we get a neat TLA and a methodology where each part can advance rapidly and independently.No matter if you are a large team or a single developer. BEM gives its benefits for all.

Pros for developer

Simplifies the development and support
Eases switching between projects
Enables reusing code
Prevents code degradation when the project team grows

Pros for team

Rapid involving new team members
Different professionals share the same code base
Independent work on the parts of the project
Using someone else's code without diving into implementation

Methodology

BEM gives useful patterns and methodological recommendations on writing CSS, JavaScript, templates (and other web-related techs) in an extra-semantic way.
Besides it's a pleasure for developers, it also helps to keep interfaces fast-to-develop and easy-to-maintain in the long run.

Block, Element, Modifier

The three terms uncover their meaning in this well-illustrated article.

Quick start full BEM stack

Try BEM idea of independent blocks, BEMHTML template engine, writing extra semantic JavaScript, linking a library to the project and redefining its functionality at the project level.

The history of BEM

Once upon a time, in a distant country far-far away, an IT company named Yandex started developing web search and affiliated services...

Tools

BEM tools

Toolkit to work with files based on BEM methodology: create entities, dev server, build final runtime.

CSSO

CSSO (CSS Optimizer) is a CSS minimizer unlike others. In addition to usual minification techniques it can perform structural optimization of CSS files, resulting in smaller file size compared to other minifiers.

SVGO

(SVG Optimizer) is a NodeJS-based tool for optimizing SVG vector graphics files.
SVGO has a plugin-based architecture, so almost every optimization is a separate plugin, and you can easily add your own.

All tools developed by BEM team

Block libraries

bem-bl

This is an open source UI block library implemented accroding to the BEM methodology.
Blocks are implemented at bemhtml (templates), css, client-side js.
You need BEM tools to use the library.

bootstrap-bl

It's the Bootstrap, but better!
bootstrap-bl — half-assed attempt to implement original bootstrap using BEM methodology, modularity and stuff.

Articles

Full stack quick start

This article shows you how to develop an online shop web page using BEM principles in CSS, JavaScript and BEMHTML templates.

What you can borrow from Yandex frontend dev

The article sums up Yandex over 7-year experience in finding solutions for efficient frontend development.

Borschik

Borschik is a simple but powerful builder for text-based file formats.

BEM app with LeafLet and 2GIS API

An example of map service made with BEM

Hello, BEMHTML!

THis document will help to start writing BEMHTML templates and get the main principles in 7 simple steps.

BEMHTML reference

This is BEMHTML reference manual.

BEMHTML: template engine for BEM

BEMHTML rationale.

Blog

Maintainable Frontend Development with BEM

Talk by Varvara Stepanova at MetaRefresh 2013 in Bangalore

BEM goes to India

Development with BEM at Meta Refresh 2013 in India