2. Intro
âą Thanks to @r_ridho for introduction BEM to
Blibliâs Front End Devs
âą Now, lets deep dive about this methods
3. Getting know about BEM
B.E.M
BLOCK - ELEMENT â MODIFIER
BEM is a highly useful, powerful, and simple naming
convention that makes your front-end code easier to
read and understand, easier to work with, easier to
scale, more robust and explicit, and a lot more strict.
4. Getting know about BEM
B.LOK
Standalone entity, have no dependent to its
parent.
Ex : header, container, footer
5. Getting know about BEM
E.LEMENT
Part of block, cannot stand alone, have
dependent with its parent (*block)
Ex : header title, header logo, header menu
6. Getting know about BEM
M.ODIFIER
Flag in block or element that change appearance
or behavior.
Ex : is active, orange, selected, highlighted
8. BEM Rule
BEM has simple rule for class naming :
âą Block is like usual class, kiss, meaningful,
represent its function. ex : header, menu, etc.
âą Element using double underscore (__) with its
block as prefix.
ex : header__logo, header__title, etc
âą Modifier using double dash (--)
ex : menuâselected, tabâactive, buttonâ
orange, etc.
10. Deep Dive
âą Every block should have own file.
âą Block can be place everywhere, every
positioning has be on its parent.
âą Element can be stand for own block, but
should have element rule.
âą Modifier can be global without added element
or block flagged, but normally NO.
âą Donât reuse class, reuse class rule.
âą BEM comes for reduce nested in OOCSS, so
donât nested more than 2.
12. BEM Goals
âą Maintainable
âą Easy Tracking
âą Modular
âą Flexible
âą Support partial load
âą Fit with component based modern framework
ex : React, Vue, Polymer.
13. Learn from Real Life
DEMO FROM BLIBLI TRAVEL
https://www.blibli.com/travel
14. Learn from Real Life
SIMPLE FRAMEWORK WITH BEM
https://github.com/mazipan/awesome-bemcss