BEVM ( block__element--variation -modifier)
-
Upload
jyaasa-technologies -
Category
Technology
-
view
381 -
download
0
Transcript of BEVM ( block__element--variation -modifier)
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
BEVMBlock Element Variation Modifier
Block__Element--Variation -Modifier
Hello! I am Nikesh Suwal
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Front End Developer Jyaasa Technologies
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
BEMBlock__Element--Modifier
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
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>
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
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
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
What if told you 'single' and 'multiple' classes
are complete different things?
BEVM
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Single Class = Variation
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Multiple Class = Modifier
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Variation
“A different or distinct form or version of something”
Oxford dictionary
VariationSingle 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
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Modifier
“A ... thing that makes partial or minor changes to something”
Oxford dictionary
Chainable ModifierMultiple Class approach
<button class =”btn -color-primary -size-large”></button>
New Modifier Syntax
-namespace-descriptor
Chainable Modifier Rule
Chainable modifiers should never modify the same CSS property twice for a given module
Golden Rule:
● See ‘Golden rule'
● Use a namespace which describe the changee.g. size, color, width etc
● Use generic descriptorse.g. large, primary, dark etc
Combining Variations and Modifiers
<button class="btn--3d -color-primary -size-large -width-full">
Special Mention
<button class="js-hook block__element--variation -modifier h-helper is-state ">
● State Classes ● Helper/Utility ● classes JS Hooks
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
Resources
Chainable BEM Modifierhttp://webuild.envato.com/blog/chainable-bem-modifiers/
Sassier (BE)Modifiershttp://viget.com/extend/bem-sass-modifiers
BEM modifiers: multiple classes vs @extendhttp://bensmithett.com/bem-modifiers-multiple-classes-vs-extend
Thank you!Any Queries?
facebook.com/nikesh.suwalgithub.com/nikeshsuwal
Copyright 2015. Jyaasa Technologies. Copyright 2016. Jyaasa Technologies.
http://jyaasa.com