Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
BEM style example
.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>
$module: '.Post';
#{$module} {
&__title {}
&__content {}
&--is-highlighted{ // this is a state modifier for the entire block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.