Home >Technology >BEM it! Introduction to BEM methodology

BEM it! Introduction to BEM methodology

Date post:28-Nov-2014
Category:
View:679 times
Download:5 times
Share this document with a friend
Description:
This presentation was given internally for the frontend developers of Booking.com
Transcript:
  • 1. by Varya Stepanova @varya_en http://varya.me BEM it! Introduction to BEM Methodology
  • 2. Why bother?
  • 3. There is no unified semantic model across different FE technologies HTML stands for hypertext I've heard we mostly do web apps... CSS offers no structure out of the box Usually a pile of rules put together. Sorry. JavaScript uses its own approaches. ...a new one comes with every framework.
  • 4. 8,500 packages in Bower registry JavaScript: the most popular language on GitHub Repositories created: 264,000 in 2013 296,000 in 2012 Frameworks are not enough
  • 5. BEM to the rescue
  • 6. What is BEM? BEM claims that simple semantic model (Blocks, Elements, and Modifiers) is enough to define the way you author HTML / CSS / JavaScript, structure code and components, set up interaction and scale your project to build an industry-leading service.
  • 7. What is BEM? BEM is a methodology, not a framework Semantic model + best practices for all things frontend BEM is a fix for web app semantics ...the same as jQuery is a fix for DOM APIs Originally introduced by Yandex 19 million daily audience 200+ web services tools, code, tutorials, conferences open source
  • 8. Some theory
  • 9. What is BEM? BLOCK Standalone part of an interface: button text field flyout heading menu
  • 10. What is BEM? BLOCK Standalone part of an interface: button text field flyout heading menu Re-usable in different contexts Self-sufficient
  • 11. What is BEM? ELEMENT An integral part of a block: button text field flyout heading menu
  • 12. What is BEM? ELEMENT An integral part of a block: button contains no elements text field label flyout title heading logo menu item
  • 13. What is BEM? ELEMENT An integral part of a block: button contains no elements text field label flyout title heading logo menu item No standalone meaning outside of a block Some blocks have no elements
  • 14. What is BEM? MODIFIER Defines property or state on a block or element: button text field flyout heading menu item
  • 15. What is BEM? MODIFIER Defines property or state on a block or element: button theme text field editable state flyout alignment heading level menu item bullet type
  • 16. What is BEM? MODIFIER Defines property or state on a block or element: button theme text field editable state flyout alignment heading level menu item bullet type Multiple modifiers may co-exist on a single block/element
  • 17. BEM forms a semantic overlay over the existing DOM structure. This overlay is called a BEM tree.
  • 18. DOM tree BEM tree
  • 19. How does BEM map to DOM? Blocks/elems/mods are denoted with CSS classes using a naming convention. DOM nodes can be shared: block1 + block2 may occupy the same container; element1 + block2 may co-exist on the same node. DOM is encapsulated: complex DOM structure may constitute a single element
  • 20. BEM HOWTO for your beloved project with benefits explained
  • 21. HOWTO: HTML / CSS
  • 22. CSS naming conventions BEM uses CSS class names to denote blocks, elements and modifiers.
  • 23. CSS naming conventions BLOCK .button .text-field .flyout .heading .menu or with prefix .b-button .b-text-field .b-flyout .b-heading .b-menu
  • 24. CSS naming conventions
    • Read More
    • Buy Online
    • Contact
  • 25. CSS naming conventions ELEMENT .button__icon .text-field__label .flyout__title .heading__logo .menu__item
  • 26. CSS naming conventions
    • Read More
    • Buy Online
    • Contact
  • 27. CSS naming conventions MODIFIER .button_theme_dark .text-field_editable .flyout_align_top .heading_level_alpha .menu__item_promo
  • 28. CSS naming conventions MODIFIER .button--theme--dark .text-field--editable .flyout--align--top .heading--level--alpha .menu__item--promo as you wish
  • 29. CSS naming conventions
    • Read More
    • Buy Online
    • Contact
  • 30. CSS naming conventions
    • Read More
    • Buy Online
    • Contact
  • 31. so structure much semantics wow much semantics very code such frontend
  • 32. BEM CSS: best practices 1. Map the whole document to BEM blocks 2. No CSS outside of blocks 3. Independent blocks no global CSS resets
  • 33. Benefits! Drop tag names and IDs Faster selectors Re-use same semantics on any tag:
  • 34. Benefits! CSS specificity magic solved Priority of CSS rules: by specificity first, then by rule order td.data { background-color: gray } td.summary { background-color: white } .total-summary { background-color: yellow }
  • 35. Benefits! CSS specificity magic solved Priority of CSS rules: by specificity first, then by rule order td.data { background-color: gray } td.summary { background-color: white } td.total-summary { background-color: yellow }
  • 36. Benefits! Bye-bye CSS cascade?! Only one CSS class needed to: style a block container style any element within a block add extras/overrides with a modifier Doesn't it cover 90% of your styling needs?
  • 37. Benefits! Bye-bye CSS cascade?! ...well, not exactly. Example of an element affected by a block modifier: /* theme menu items for a dark theme */ .menu_theme_dark .menu__item { color: white; background-color: darkgray; }
  • 38. HOWTO: Block dependencies
  • 39. LoginLoginpassword Main username Download Help Contact
  • 40. LoginLoginpassword Main username Download Help Contact headerheader text inputtext input text inputtext input buttonbutton menumenu
  • 41. LoginLoginpassword Main username Download Help Contact _size_small _size_small _primary
  • 42. LoginLoginpassword Main username Download Help Contact .header .input { font-size: 0.85em } .header .button { background: navy }
  • 43. LoginLoginpassword Main username Download Help Contact .header .input { font-size: 0.85em } .header .button { background: navy } !
  • 44. HOWTO: JavaScript
  • 45. JavaScript Components Blocks Work with BEM tree, not DOM tree
  • 46. JavaScript deals with BEM blockObj blockObj.setMod('active'); //
    blockObj.delMod('active); //
  • 47. JavaScript deals with BEM BlockObj.do({ 'active': function() { // do smth when active }, 'disabled': function() { // do something when disabled } });
  • 48. JavaScript i-bem.js framework by Yandex + tutorial http://bit.ly/bem-js-tutorial/ First English docs (expect more!) 100% BEM-based declarative API Part of a larger bem-core library
  • 49. HTML is no longer semantic. JavaScript is.
  • 50. HOWTO: Design / UX
  • 51. BEM is the universal language for developers and designers, the bridge across technology gaps.
  • 52. Build your block library. The code itself is the styleguide.
  • 53. UX + Frontend Live style guide Always up-to-date Prototyping mapped to code from day one Designers and devs speak the same language Good for making early estimates
  • 54. HOWTO: File structure
  • 55. File and folder structure Flat block structure with a folder for each block. Simple structure for BEM beginners: /block block.css block.js block.tpl ...whatever you need
  • 56. File and folder structure Advanced structure to expose semantics /block /__elem1 block__elem1.css block__elem1.tpl /_mod block_mod.css block.css block.js block.tpl
  • 57. Bundles for browsers page.css: @import url(header/header.css); @import url(button/button.css); @import url(button/button_promo.css); page.js: /* include: button.js */ /* include: login.js */
  • 58. Build process and deployment Use a build tool! Borschik: an open-source build tool by Yandex Code: https://github.com/bem/borschik English docs: http://bem.info/articles/borschik
  • 59. http://bem.info
  • 60. Thank you Booking! @varya_en http://varya.me
of 60/60
by Varya Stepanova @varya_en http://varya.me BEM it! Introduction to BEM Methodology
Embed Size (px)
Recommended