This slide will introduce BEM CSS convention in short word.

1. REINTRODUCTION BEM CSS
By Irfan Maulana

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

7. BEM Rule
B.E.M
RULE

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.

9. Deep Dive
DEEP DIVE
B.E.M

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.

11. BEM Goals
B.E.M
GOALS

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

15. THANK YOU