BEM stands for Block Element Modifier
[block]__[element]--[modifier]
BEM stands for Block Element Modifier
nav ul li a
Write CSS selectors like
a li ul nav
Read CSS selectors like
High specificity
Low specificity
nav ul li a
a
Block components are removable in one piece and are for a specific purpose or use.
Outer most part of your component
Standalone entity that is meaningful on its own
.button
<button class="button">
Click me
</button>
Names may consist of Latin letters, digits, dashes and underscores.
//HTML
<header class="block"></header>
//CSS
.block {
.....
}
Element that depends upon the block (no standalone meaning).
Separated from the block with "__".
.button__icon {
font-size: 1em;
}
<button class="button">
Click me <span class="button__icon"></span>
</button>
The modifier changes the style of a block or element. Separated from the block with "--"
.button {
border: 1px dotted gold;
}
.button__icon {
font-size: 1em;
}
.button__icon--small {
font-size: 0.5em
}
<button class="button">
<i class="button__icon button__icon--small"></i>
</button>
.nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav ul ul {
padding-left: 1em;
}
.nav ul li {
float: left;
}
.nav ul li a {
font-weight: 600;
color: #000000;
background: #ccc;
display: inline-block;
padding: 0.5em;
}
.nav ul li ul li a {
background: #000000;
color: #cccccc;
}
.list--reset {
margin: 0;
padding: 0;
list-style: none;
}
.navigation__sub-list {
padding-left: 1em;
}
.navigation__item {
float: left;
}
.navigation__link {
font-weight: 600;
color: #000000;
background: #ccc;
display: inline-block;
padding: 0.5em;
}
.navigation__sub-list .navigation__link {
background: #000000;
color: #cccccc;
}
// Block
.navigation {
// Element
&__item {
border-top: 1px solid #ccc;
}
// Modifier
&--sub {
margin-left: 15px;
.navigation__link {
font-style: italic;
}
}
}
.navigation__item {
border-top: 1px solid #ccc;
}
.navigation--sub {
margin-left: 15px;
}
.navigation--sub .navigation__link {
font-style: italic;
}