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