Download - Bliblidotcom - Reintroduction BEM CSS
REINTRODUCTION BEM CSSBy Irfan Maulana
Intro
• Thanks to @r_ridho for introduction BEM to Blibli’s Front End Devs
• Now, lets deep dive about this methods
Getting know about BEM
B.E.MBLOCK - 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.
Getting know about BEM
B.LOK
Standalone entity, have no dependent to its parent.Ex : header, container, footer
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
Getting know about BEM
M.ODIFIER
Flag in block or element that change appearance or behavior.Ex : is active, orange, selected, highlighted
BEM Rule
B.E.MRULE
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.
Deep Dive
DEEP DIVE
B.E.M
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.
BEM Goals
B.E.MGOALS
BEM Goals
• Maintainable• Easy Tracking• Modular• Flexible• Support partial load• Fit with component based modern framework
ex : React, Vue, Polymer.
Learn from Real Life
DEMO FROM BLIBLI TRAVELhttps://www.blibli.com/travel
Learn from Real Life
SIMPLE FRAMEWORK WITH BEMhttps://github.com/mazipan/awesome-bemcss
THANK YOU