chainable bem modifiers
Post on 14-Apr-2017
955 Views
Preview:
TRANSCRIPT
Chainable BEM Modifiers Jordan Lewis
‣ Solved an issue that has been bothering us since adopting BEM
‣ Removed ambiguity from our code
‣ Build a super flexible UI Library
‣ Enabled those less skilled in Frontend practices to be productive
Jordan Lewis @jordanlewiz
‣ Problem with BEM syntax
‣ Finding a better solution
‣ Variations
‣ Modifiers
‣ Recap
What we’ll cover
The problem with BEM syntax
block__element—modifier
BEM
PROBLEMS WITH BEM
PROBLEMS WITH BEM
BEM 101
BEM Modifiers are used in 2 different ways..
PROBLEMS WITH BEM
Having two conventions using identical syntax is a recipe for confusion.
PROBLEMS WITH BEM
Single class
SINGLE CLASS MODIFIERS
‣ Easy to understand at a glance
‣ Pushes all the logic into the CSS
‣ Makes use of Sass’ @extend to make the modifications
‣ Best suited for modules that only need to make one modification at a time
Benefits of a single class modifier
SINGLE CLASS MODIFIERS
SASS CSS
SINGLE CLASS MODIFIERS
Multiple classes (aka chaining)
MULTIPLE CLASSES MODIFIER
‣ Logic kept in the HTML
‣ Configure any given module on the fly
‣ Best suited for modules with multiple modifiers that are designed to be mixed and matched.
Benefits of multiple classes
MULTIPLE CLASSES MODIFIER
SASS CSS
MULTIPLE CLASSES MODIFIER
Finding a better solution
What if told you 'single' and 'multiple' classes
are complete different things?
SOLUTION
SOLUTION
Single class =
variation
SOLUTION
SOLUTION
Multiple classes =
modifiers
SOLUTION
Introducing…
BEVM
SOLUTION
block__element--variation -modifier
Variations
“A different or distinct form or version of something”
VARIATION
Oxford Dictionary
Variation
Variation (aka Single class approach)
VARIATION
‣ Can only apply one 'variation' at a time
‣ No need to repeat base class
‣ Can use Sass @extends to build
‣ Or can write a custom variation (no @extends)
‣ Can combine with Modifiers
Variation rules
VARIATION
Chainable Modifers
CHAINABLE MODIFIERS
“A ... thing that makes partial or minor changes to something”
Oxford Dictionary
Modifier
Chainable Modifiers (aka Multiple class approach)
CHAINABLE MODIFIERS
New modifier syntax
-namespace-descriptor
Leading hyphen Namespace
Descriptor for the modification
CHAINABLE MODIFIERS
GOLDEN RULE:
Chainable modifiers should never modify the same CSS property twice for a given module
CHAINABLE MODIFIERS
btn
btn -color-primary
btn -color-primary -size-l
btn -color-primary -size-l -width-full
CHAINABLE MODIFIERS
CHAINABLE MODIFIERS
‣ See 'Golden rule'
‣ Use a namespace which describe the change e.g. size, color, width etc
‣ Use generic descriptors e.g. large, primary, dark etc
Chainable Modifier rules
CHAINABLE MODIFIERS
Won’t that make things hard to find?
CHAINABLE MODIFIERS
Recap
RECAP
‘variations’ and ‘modifiers’ are different so lets treat them like they are.
block__element--variation -modifier
Modifiers: How we got here?
RECAP
Combining Variations and Modifiers
RECAP
RECAP
‣ State classes ‣ Helper/Utility classes ‣ JS Hooks
Special mentions
RECAP
‣ Build a super flexible UI Library ‣ Configure modules in the HTML ‣ Short, concise syntax ‣ Reducing the amount of CSS that we need to write ‣ Increases development speed ‣ Can still use 'variations' if you want ‣ Works with 'helper' and 'state' classes ‣ Greppable
Benefits of BEVM
RECAP
Live demo
RECAP
‣ Chainable BEM Modifiers http://webuild.envato.com/blog/chainable-bem-modifiers
‣ Sassier (BE)Modifers http://viget.com/extend/bem-sass-modifiers
‣ BEM modifiers: multiple classes vs @extend http://bensmithett.com/bem-modifiers-multiple-classes-vs-extend
Resources
@jordanlewizjordan@lewis.io
Thanks!
http://careers.envato.com
top related