BEVM ( block__element--variation -modifier)

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

Hello!
I am Nikesh Suwal
Front End Developer
Jyaasa Technologies

BEM
Block__Element--Modifier

● 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

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>

● 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

● 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

What if told you 'single' and 'multiple' classes
are complete different things?

BEVM

Single Class = Variation

Multiple Class = Modifier

Variation
“A different or distinct form or version of something”
Oxford dictionary

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

Modifier
“A ... thing that makes partial or minor changes to something”
Oxford dictionary

Chainable Modifier
Multiple 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 change
e.g. size, color, width etc
● Use generic descriptors
e.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 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

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

BEVM ( block__element--variation -modifier)

More Related Content

Viewers also liked

Similar to BEVM ( block__element--variation -modifier)

More from Jyaasa Technologies

Recently uploaded

BEVM ( block__element--variation -modifier)