a CSS methodology that helps you to create reusable components and code sharing in front‑end development
Block, Element, Modifier. .block__element--modifier
Block - standalone entity meaningful on its own
Element - part of a block that has no standalone meaning and is semantically tied to its blog
Modifier - a flag on a block or element
The main benefits are modularity and reusability. Helped solve issues where CSS would have a direct coupling on the DOM order, as you'd only be targeting a small amount of classes. This meant the CSS was brittle, if the DOM changed, your nested selectors (e.g. .class p > a) would also break.
However there are issues around verbosity. Class names start to get increasingly long, and often need to be created even if there aren't associated styles.