INTRODUCTION BEM CSS CONVENTION

This will help you to understand BEM CSS as class naming convention in CSS

Transcript

1. INTRODUCTION 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