BEM style example

generated-style.css

.Post{}
.Post__title{}
.Post__content{}
.Post--is-highlighted .Post__title{} // now we are using the cascade to override styling when that block is at a particular state

notes.txt

Key benefits I’ve learned from doing this;
- The value of using classes over element tags is that you can change your elements without necessarily having to change your CSS
- I never use IDs for style – if I see an ID in my own code, I know it’s for JS targeting
- I can understand the relationship of my HTML elements and my HTML blocks are more easily reused
- It's harder for plugins to bork the style of the component and harder for this component to bork the style of something else
- Coming back to this code after a long time away, it's easier to understand what's going on

The downsides;
- Classnames can get verbose

post.html

<div class="Post Post--is-highlighted">
    <h1 class="Post__title">...</h1>
    <div class="Post__content">...</div>
</div>

style.scss

$module: '.Post';
#{$module} {
   &__title {}
   &__content {}
   &--is-highlighted{ // this is a state modifier for the entire block
       #{$module}{
           &__title{}
       }
   }
}