Your SlideShare is downloading. ×
0
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

BEM it! Introduction to BEM methodology

784

Published on

This presentation was given internally for the frontend developers of Booking.com

This presentation was given internally for the frontend developers of Booking.com

Published in: Technology
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
784
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
2
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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 <ul class=”menu”> <li> <a href=”/more”>Read More</a> </li> <li> <a href=”/buy”>Buy Online</a> </li> <li> <a href=”/buy”>Contact</a> </li> </ul>
  • 25. CSS naming conventions ELEMENT .button__icon .text-field__label .flyout__title .heading__logo .menu__item
  • 26. CSS naming conventions <ul class=”menu”> <li class=”menu__item”> <a href=”/more”>Read More</a> </li> <li class=”menu__item”> <a href=”/buy”>Buy Online</a> </li> <li class=”menu__item”> <a href=”/buy”>Contact</a> </li> </ul>
  • 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 <ul class=”menu”> <li class=”menu__item”> <a href=”/more”>Read More</a> </li> <li class=”menu__item”> <a href=”/buy”>Buy Online</a> </li> <li class=”menu__item”> <a href=”/buy”>Contact</a> </li> </ul>
  • 30. CSS naming conventions <ul class=”menu”> <li class=”menu__item menu__item_promo”> <a href=”/more”>Read More</a> </li> <li class=”menu__item”> <a href=”/buy”>Buy Online</a> </li> <li class=”menu__item”> <a href=”/buy”>Contact</a> </li> </ul>
  • 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: — <DIV class=”block”> — <SPAN class=”block”> — <TABLE class=”block”>
  • 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 } <TD class="summary total-summary"> <!-- Still gray, baby :-( --> </TD>
  • 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 } <TD class="summary total-summary"> <!-- This works, I'm yellow now --> </TD>
  • 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'); // <div class=”block block_active”> blockObj.delMod('active); // <div class=”block”>
  • 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

×