Skip to content

Instantly share code, notes, and snippets.

@mishterk
Last active September 29, 2017 02:55
Show Gist options
  • Save mishterk/56067bd8f2db9dcdf421774203b96d4d to your computer and use it in GitHub Desktop.
Save mishterk/56067bd8f2db9dcdf421774203b96d4d to your computer and use it in GitHub Desktop.
BEM style example
.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
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
<div class="Post Post--is-highlighted">
<h1 class="Post__title">...</h1>
<div class="Post__content">...</div>
</div>
$module: '.Post';
#{$module} {
&__title {}
&__content {}
&--is-highlighted{ // this is a state modifier for the entire block
#{$module}{
&__title{}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment