BEMC
Block Element Modifier Context
Key concepts
- Lintable
- Low but manageable selector specificity
- BEM + context syntax
- .context* classes for context/region changes that effect arbitrary child elements
- .is- classes for states
- .has- classes for encapsulation
Example
.block .block__element .block--modifier .context\* .block // context specific overrides
Rules
Block elements are modified by the parent element's modifier class.
.block--stretch .block__title {
width: 100%;
}
State and encapsulation classes are the exception.
// State
.block.is-visible {}
// Encapsulation
.has-block--sticky {
position: relative;
padding-top: 4em;
}
.block--sticky {
position: fixed;
}
NOT Allowed
Unnecessary specificity:
.block.block--stretch {}
.block.block--stretch .block__element {}
Notes
It's perfectly reasonable for block and context classes to sit together:
<header class="header header*">
...
</header>