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