Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bliblidotcom - Reintroduction BEM CSS

964 views

Published on

This slide will introduce BEM CSS convention in short word.

Published in: Technology
  • Be the first to comment

Bliblidotcom - Reintroduction BEM CSS

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

×