E
M
B
block ~ element ~ modifier
naming convention
.header__dropdown-menu--xl
it's a
Block
an independent page component
Its name describes its purpose, or what it is,
not its state or how it looks
Element
a composite part of a block that can't be used separately
Again, the name describes its purpose, not its state
.menu__site-nav
Modifier
a descriptor of an element's appearance, state, or behavior
.menu__site-nav--tab
.menu__site-nav--btn
Should I create a block or an element?
Is it reusable/modular? -> BLOCK
EXCEPTION: elements that must be divided into smaller parts – subelements – in order to simplify development.
Is it dependent/not a stand-alone component? -> ELEMENT
You can't create elements of elements. In a case like this, instead of creating an element, you need to create a block.
But...why?
Good Reasons
Avoids inheritance and provides scope with unique CSS classes for meaningful elements.
Flat, non-nested structure and unique selectors keep specificity low, reducing style conflicts.
Promotes modularity: components are reusable and defined independently of their context.
