Chainable BEM Modifiers Jordan Lewis

‣ 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

Jordan Lewis @jordanlewiz

‣ Problem with BEM syntax

‣ Finding a better solution

‣ Variations

‣ Modifiers

‣ Recap

What we’ll cover

The problem with BEM syntax

block__element—modifier

BEM

PROBLEMS WITH BEM

PROBLEMS WITH BEM

BEM 101

BEM Modifiers are used in 2 different ways..

PROBLEMS WITH BEM

Having two conventions using identical syntax is a recipe for confusion.

PROBLEMS WITH BEM

Single class

SINGLE CLASS MODIFIERS

‣ 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

SASS CSS

SINGLE CLASS MODIFIERS

Multiple classes (aka chaining)

MULTIPLE CLASSES MODIFIER

‣ 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

SASS CSS

MULTIPLE CLASSES MODIFIER

Finding a better solution

What if told you 'single' and 'multiple' classes

are complete different things?

SOLUTION

SOLUTION

Single class =

variation

SOLUTION

SOLUTION

Multiple classes =

modifiers

SOLUTION

Introducing…

BEVM

SOLUTION

block__element--variation -modifier

Variations

“A different or distinct form or version of something”

VARIATION

Oxford Dictionary

Variation

Variation (aka Single class approach)

VARIATION

‣ 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

Chainable Modifers

CHAINABLE MODIFIERS

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

Oxford Dictionary

Modifier

Chainable Modifiers (aka Multiple class approach)

CHAINABLE MODIFIERS

New modifier syntax

-namespace-descriptor

Leading hyphen Namespace

Descriptor for the modification

CHAINABLE MODIFIERS

GOLDEN RULE:

Chainable modifiers should never modify the same CSS property twice for a given module

CHAINABLE MODIFIERS

btn

btn -color-primary

btn -color-primary -size-l

btn -color-primary -size-l -width-full

CHAINABLE MODIFIERS

CHAINABLE MODIFIERS

‣ 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

Won’t that make things hard to find?

CHAINABLE MODIFIERS

Recap

RECAP

‘variations’ and ‘modifiers’ are different so lets treat them like they are.

block__element--variation -modifier

Modifiers: How we got here?

RECAP

Combining Variations and Modifiers

RECAP

RECAP

‣ State classes ‣ Helper/Utility classes ‣ JS Hooks

Special mentions

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

RECAP

Live demo

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

@jordanlewizjordan@lewis.io

Thanks!

http://careers.envato.com