BEM Eksempel

bem-init.html

<div class="human">
 
  <div class="human__head"></div>
 
  <div class="human__arm"></div>
  <div class="human__arm"></div>
 
  <div class="human__body"></div>
 
  <div class="human__leg"></div>
  <div class="human__leg"></div>
 
</div>

bem-style-w-modifiers.css

.human {
}

.human--developer {
  fuel: 'coffee';
}

.human--pirate {
  profession: 'pirate stuff';
}

.human__head {
}

.human__arm {
}

.human__body {
}

.human__leg {
}
.human__leg--wood {
  material: "wood";
}

bem-style.css

.human {
}

.human__head {
}

.human__arm {
}

.human__body {
}

.human__leg {
}

bem-w-modifiers.html

<div class="human human--pirate">
 
  <div class="human__head">
  </div>
 
  <div class="human__arm"></div>
  <div class="human__arm"></div>
 
  <div class="human__body"></div>
 
  <div class="human__leg"></div>
  <div class="human__leg human__leg--wood"></div>
 
</div>
 
<div class="human human--developer">
 
  <div class="human__head">
  </div>
 
  <div class="human__arm"></div>
  <div class="human__arm"></div>
 
  <div class="human__body"></div>
 
  <div class="human__leg"></div>
  <div class="human__leg human__leg--wood"></div>
 
</div>