Block, Element and Modifier

// Blocks are named as standard CSS classes
.block { 
}
// Elements declared with 2 underscores, after block
.block__element {
}
// Modifiers declared with 2 dashes, after block or after element
.block--modifier {
}
// element and modifier together
.block__element--modifier {
}

• Main interface element, such as a header, navigation, list, articles, etc.

<header class="site-header"></header>

• Secondary interface elements or sub-interface elements. Things like a logo inside a header or profile picture inside of an article or author block.

<img class="site-header__logo" alt="site logo">

• Ability to have themeable styles/classes
• Useful for primary, secondary, tertiary identification

<h1 class="story__title--primary">Main Story Title</h1>

.block-name {
  
  /* rules */
  
  &__element {
    /* rules */
  }
  &__another-element {
    /* rules */
  }
}

• Understanding CSS BEM