BEM stands for Block, Element, Modifier and is a methodology used to create reusable components in CSS by clearly defining and separating the roles of different class names.
Overview of BEM Components
- Block: The outermost parent component that acts as a standalone entity. For example,
.button
. - Element: A part of the block that has no standalone meaning and is semantically tied to its block. For example,
.button__text
. - Modifier: A flag on a block or element that changes its appearance or behavior. For example,
.button--large
.