Download - Chainable BEM Modifiers
![Page 1: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/1.jpg)
Chainable BEM Modifiers Jordan Lewis
![Page 2: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/2.jpg)
‣ 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
![Page 3: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/3.jpg)
Jordan Lewis @jordanlewiz
![Page 4: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/4.jpg)
![Page 5: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/5.jpg)
‣ Problem with BEM syntax
‣ Finding a better solution
‣ Variations
‣ Modifiers
‣ Recap
What we’ll cover
![Page 6: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/6.jpg)
The problem with BEM syntax
![Page 7: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/7.jpg)
block__element—modifier
BEM
PROBLEMS WITH BEM
![Page 8: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/8.jpg)
PROBLEMS WITH BEM
BEM 101
![Page 9: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/9.jpg)
BEM Modifiers are used in 2 different ways..
PROBLEMS WITH BEM
![Page 10: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/10.jpg)
Having two conventions using identical syntax is a recipe for confusion.
PROBLEMS WITH BEM
![Page 11: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/11.jpg)
Single class
SINGLE CLASS MODIFIERS
![Page 12: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/12.jpg)
‣ 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
![Page 13: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/13.jpg)
SASS CSS
SINGLE CLASS MODIFIERS
![Page 14: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/14.jpg)
Multiple classes (aka chaining)
MULTIPLE CLASSES MODIFIER
![Page 15: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/15.jpg)
‣ 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
![Page 16: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/16.jpg)
SASS CSS
MULTIPLE CLASSES MODIFIER
![Page 17: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/17.jpg)
Finding a better solution
![Page 18: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/18.jpg)
What if told you 'single' and 'multiple' classes
are complete different things?
SOLUTION
![Page 19: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/19.jpg)
SOLUTION
![Page 20: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/20.jpg)
Single class =
variation
SOLUTION
![Page 21: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/21.jpg)
SOLUTION
Multiple classes =
modifiers
![Page 22: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/22.jpg)
SOLUTION
Introducing…
![Page 23: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/23.jpg)
BEVM
SOLUTION
block__element--variation -modifier
![Page 24: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/24.jpg)
Variations
![Page 25: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/25.jpg)
“A different or distinct form or version of something”
VARIATION
Oxford Dictionary
Variation
![Page 26: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/26.jpg)
Variation (aka Single class approach)
VARIATION
![Page 27: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/27.jpg)
‣ 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
![Page 28: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/28.jpg)
Chainable Modifers
![Page 29: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/29.jpg)
CHAINABLE MODIFIERS
“A ... thing that makes partial or minor changes to something”
Oxford Dictionary
Modifier
![Page 30: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/30.jpg)
Chainable Modifiers (aka Multiple class approach)
CHAINABLE MODIFIERS
![Page 31: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/31.jpg)
New modifier syntax
-namespace-descriptor
Leading hyphen Namespace
Descriptor for the modification
CHAINABLE MODIFIERS
![Page 32: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/32.jpg)
GOLDEN RULE:
Chainable modifiers should never modify the same CSS property twice for a given module
CHAINABLE MODIFIERS
![Page 33: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/33.jpg)
btn
btn -color-primary
btn -color-primary -size-l
btn -color-primary -size-l -width-full
CHAINABLE MODIFIERS
![Page 34: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/34.jpg)
CHAINABLE MODIFIERS
![Page 35: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/35.jpg)
‣ 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
![Page 36: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/36.jpg)
Won’t that make things hard to find?
CHAINABLE MODIFIERS
![Page 37: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/37.jpg)
Recap
![Page 38: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/38.jpg)
RECAP
‘variations’ and ‘modifiers’ are different so lets treat them like they are.
block__element--variation -modifier
![Page 39: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/39.jpg)
Modifiers: How we got here?
RECAP
![Page 40: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/40.jpg)
Combining Variations and Modifiers
RECAP
![Page 41: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/41.jpg)
RECAP
‣ State classes ‣ Helper/Utility classes ‣ JS Hooks
Special mentions
![Page 42: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/42.jpg)
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
![Page 43: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/43.jpg)
RECAP
Live demo
![Page 44: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/44.jpg)
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
![Page 45: Chainable BEM Modifiers](https://reader031.vdocuments.net/reader031/viewer/2022021921/58f079471a28abb7018b465b/html5/thumbnails/45.jpg)
Thanks!
http://careers.envato.com