namesbyadoublehyphen(forexample,.block--modifieror.block__element-
-modifier).
Here’swhatBEMlookslikeusingasearchformexample:
<form class="search">
<div class="search__wrapper">
<label for="s" class="search__label">Search for: </label>
<input type="text" id="s" class="search__input">
<button type="submit" class="search__submit">Search</button>
</div>
</form>Avariationofthisformwithadarkbackgroundmightusethefollowingmarkup:
<form class="search search--inverse">
<div class="search__wrapper search__wrapper--inverse">
<label for="s" class="search__label search_label--inverse">
➥Search for: </label>
<input type="text" id="s" class="search__input search__input
➥--inverse">
<button type="submit" class="search__submit search__submit--
➥inverse">Search</button>
</div>
</form>OurCSSmightlooklikethis:
.search {
color: #333;
}
.search--inverse {
color: #fff;
background: #333;
}
.search__submit {
background: #333;
border: 0;
color: #fff;
height: 2rem;
display: inline-block;
}
.search__submit--inverse {CSS Architecture and Organization 87