BEM

Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

Introduction

BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.

Naming

The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using BEM’s proper naming convention will better prepare you for design changes made to your website.

Methodologies

There are plenty of methodologies out there aiming to reduce the CSS footprint, organize cooperation among programmers and maintain large CSS codebases. This is obvious in large projects like Twitter, Facebook and GitHub, but other projects often grow into some “Huge CSS file” state pretty quickly.

OOCSS

Separating container and content with CSS “objects”.

SMACSS

Style-guide to write your CSS with five categories for CSS rules.

SUITCSS

Structured class names and meaningful hyphens.

Atomic

Breaking down styles into atomic, or indivisible, pieces.

Why BEM over the others?

No matter what methodology you choose to use in your projects, you will benefit from the advantages of more structured CSS and UI. Some styles are LESS strict and more flexible, while others are easier to understand and adapt in a team.

The reason I choose BEM over other methodologies comes down to this: it is LESS confusing than the other methods (i.e. SMACSS) but still provides us the good architecture we want (i.e. OOCSS) and with a recognizable terminology.

Mark McDonnell, Maintainable CSS with BEM

official getbem.com/introduction/


src