BEVM (block_element--variation-modifier)

1. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
BEVM
Block Element Variation
Modifier
Block__Element--Variation -Modifier

2. Hello!
I am Nikesh Suwal
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Front End Developer
Jyaasa Technologies

3. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
BEM
Block__Element--Modifier

4. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
● 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

5. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Bem Modifier in two different way
● Single Class
● Multiple Class
/* Single Class */
<button class =”btn-primary”></button>
/* Multiple Class */
<button class =”btn btn--green btn--large ”></button>

6. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
● 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 modifie
Single Class

7. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
● 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 Class

8. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
What if told you 'single' and 'multiple' classes
are complete different things?

9. BEVM
http://jyaasa.comCopyright 2016. Jyaasa Technologies.

10. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Single Class = Variation

11. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Multiple Class = Modifier

12. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Variation
“A different or distinct form or version of something”
Oxford dictionary

13. Variation
Single Class approach
<button class =”btn-primary”></button>
Variation Rules
● 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

14. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Modifier
“A ... thing that makes partial or minor changes to something”
Oxford dictionary

15. Chainable Modifier
Multiple Class approach
<button class =”btn -color-primary -size-large”></button>

16. New Modifier Syntax
-namespace-descriptor

17. Chainable Modifier Rule
Chainable modifiers should never modify the
same CSS property twice for a given module

18. Golden Rule:
● 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

19. Combining Variations and Modifiers
<button class="btn--3d -color-primary -size-large -width-full">

20. Special Mention
<button class="js-hook block__element--variation -modifier h-helper is-state ">
● State Classes
● Helper/Utility
● classes JS Hooks

21. Benefits of BEVM
● 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

22. Resources
Chainable BEM Modifier
http://webuild.envato.com/blog/chainable-bem-modifiers/
Sassier (BE)Modifiers
http://viget.com/extend/bem-sass-modifiers
BEM modifiers: multiple classes vs @extend
http://bensmithett.com/bem-modifiers-multiple-classes-vs-extend

23. Thank you!
Any Queries?
facebook.com/nikesh.suwal
github.com/nikeshsuwal
Copyright 2015. Jyaasa Technologies.Copyright 2016. Jyaasa Technologies.
http://jyaasa.com