Forked from Dan Tello's Pen BEM+.
A Pen by Ilya Rogov on CodePen.
<!-- Such classes. Much Redundant. So button. Wow. | |
<button class="button button_green button_rounded button_large"> | |
Buttin | |
</button> | |
--> | |
<h2>Individual Modifiers</h2> | |
<!-- Less Redudant, still flexible --> | |
<button class="button">Button</button> | |
<button class="button _green">Green</button> | |
<button class="button _rounded">Rounded</button> | |
<button class="button _green _rounded _large">Multi-class</button> | |
<button class="button overrides _disable" disabled>Override Class</button> | |
<h2>Saved Variations</h2> | |
<!-- The one class wonder! --> | |
<button class="button_save">Save</button> | |
<button class="button_delete">Delete</button> | |
/* | |
Declare all styles using placeholder selectors using the same old BEM syntax we all know and love. | |
*/ | |
$button { | |
background: #45beff; | |
border: none; | |
padding: 1em 2em; | |
font-size: 16px; | |
&:hover { | |
opacity: 0.75; | |
} | |
} | |
$button_green { | |
background: #3efa95; | |
} | |
$button_red { | |
background: #ff3a6a; | |
} | |
$button_large { | |
font-size:20px; | |
} | |
$button_rounded { | |
border-radius: 10px; | |
} | |
/* | |
Assemble our button, exposing modifiers we plan on using in our markup by extending placeholder selectors | |
*/ | |
.button { | |
@extend $button; | |
/* | |
Prefixing modifiers with '_', and only decalring them within the scope of what they are modifying ensures that they'll never cause a conflict | |
*/ | |
&._green { | |
@extend $button_green; | |
} | |
$button_red { | |
background: #ff3a6a; | |
} | |
&._large { | |
@extend $button_large; | |
} | |
&._rounded { | |
@extend $button_rounded; | |
} | |
} | |
/* | |
Save even more clutter by saving commonly used modifier combinations as new modifier class | |
*/ | |
.button_save { | |
@extend $button; | |
@extend $button_large; | |
@extend $button_rounded; | |
@extend $button_green; | |
} | |
.button_delete { | |
@extend $button; | |
@extend $button_large; | |
@extend $button_rounded; | |
@extend $button_red; | |
} | |
/* | |
If you really need to override something, (like the changing opacity on hover), you could create override rules like so: | |
*/ | |
.overrides { | |
&._disable { | |
opacity: 0.25; | |
} | |
} | |
// DEMO STYLES | |
body { | |
font-family: sans-serif; | |
} |