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

This slide will introduce BEM CSS convention in short word.

Related Books

Free with a 30 day trial from Scribd

See all
  • 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
  14. 14. Learn from Real Life SIMPLE FRAMEWORK WITH BEM
  15. 15. THANK YOU

    Be the first to comment

    Login to see the comments

  • GattigagaHayyutaDewa

    May. 17, 2017
  • andromedapro17

    Mar. 6, 2018

This slide will introduce BEM CSS convention in short word.


Total views


On Slideshare


From embeds


Number of embeds