BEM module example

bem-module-example.html

<!-- This is the Block -->
<div class="carousel" data-widgettype="carousel">
  <!-- This is an Element. Notice that Elements class names use the name of the Block followed by a double underscore, then the name of the Element -->
  <ul class="carousel__list" data-js="carousel-list">
    <li class="carousel__item">
      <span>List item</span>
    </li>
    <li class="carousel__item carousel__item--is-active"> <!-- This is an Element, which also contains a Modifier, Modifiers are named the same as the Element, but with a double dash followed by a modifier description -->
      <span>List item</span>
    </li>
    <li class="carousel__item">
      <span>List item</span>
    </li>
  </ul>
</div>

<!-- CSS -->
<style>
  /* Things to notice here - the 1-to-1 mappings on the elements. The styles are NOT being nested unnecessarily, and they are not specific. Un-nested styles are also faster.
     The basic idea is that more classes leads to less specificity, greater clarity and more maintainability.
  */
  .carousel {
    display: block;
  }
  .carousel__list {
    margin: 0;
    padding: 0;
  }
  .carousel__item {
    display: inline-block;
  }
  .carousel__item--is-active {
    border: 1px solid red;  
  }
</style>