BEM stands for Block Element Modifier, a methodology that helps you to create reusable components and code sharing in front-end development.
It's based on a simple naming convention–using HTML classes–and three key concepts:
- Block: a standalone entity that is meaningful on its own (e.g.
nav) - Element: a part of a block that has no standalone meaning and is semantically tied to its block (e.g.
nav__item) - Modifier: a flag on a block or element used to change appearance or behavior (e.g.
nav__item--active)