Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
1
BEM — Building 'em modular
Yelena Jetpyspayeva, Vladimir Grinenko, Yandex
You Gotta Love FrontEnd 2015, June 8-9, Tel-Aviv...
Vladimir
•  4 years at Yandex
•  Head of BEM Development Division at Yandex
•  HTML/CSS/JS/BEM 24/7
•  tadatuta@yandex-tea...
Yelena
•  4 years at Yandex
•  BEM Developer Relations Programm Manager
•  Techevents, marketing, devcommunity — come talk...
Agenda
•  What's BEM historically?
•  What's BEM technically?
•  Methodology
•  Tools, frameworks and template engines
•  ...
What's BEM historically?
7
Problems we faced
•  Low speed of rendering
•  Naming that does not help
•  Any interaction with code was dangerous becaus...
Problems → Solution
•  Long cascade affected speed of rendering...
•  ... so, BEM helped us eliminate cascade
•  by using ...
Problems → Solution
•  CSS classes forced us to reinvent names everyday...
•  ... so, with BEM we get a naming convention!...
Problems → Solution
•  0 incapsulation...
•  ...so, BEM helped us incapsulate code on block level
•  and made possible to ...
Problems → Solution
•  More demand on interactive interfaces...
•  ...was not longer a threat
•  BEM file structure gave a...
What is BEM now?
•  methodology
•  libraries
•  tools
•  JS-framework
•  templating engine
•  engine for building docs and...
What is BEM now?
•  a development division at Yandex with 30+ frontenders
•  400+ frontenders at Yandex.Services
•  1500+ ...
What's BEM technically?
29
What's BEM technically?
•  Methodology
•  Tools, frameworks and template engines
•  Block libraries
30
Web development is...
31
Web development is a pain.
32
BEM methodology
•  Teachs how to relieve that pain.
•  Just a bunch of best practicies
33
Where pain comes from
•  Support someone's else code
•  Your own in a month
•  #foot div div *
34
Where pain comes from
•  Support someone's else code
•  Refactoring
•  Reuse
•  Copy/paste doen't work
•  Hard to tell wha...
Where pain comes from
•  Support someone's else code
•  Refactoring
•  Reuse
•  A lot of different frameworks &apm; libs
36
What BEM can do that others can't
37
Abstraction
•  speak the same terms
•  code becomes self-documented
•  possibility to update components appear
38
In short
Block
Elem
Modifier
39
Block
Block,        elements
Block,        elements,        modifiers
Naming convention
Block__Element_Modifier
45
Some of BEM principles
•  Map document to BEM blocks — no tag or id selectors
•  No CSS outside of blocks
•  Independent b...
File system
prj/
blocks/
header/
header.css
header.js
header.tmpl
header.svg
header.md 47
File system
prj/
blocks/
header/
_theme/
header_theme_simple.css
header_theme_full.css
__logo/
header__logo.css 48
BEM tree
Before:
div > div > span
After:
block1 > block2 > block2__elem
49
What is BEM now?
•  methodology
•  libraries
•  tools
•  JS-framework
•  templating engine
•  engine for building docs and...
BEM Platform: How to start?
51
Quick start
•  bem.info
•  git clone https://github.com/bem/project-stub.git
52
bem.info
BEM
Block__Element_Modifier
bem.info/forum
@bem_en #b_
bem
info@bem.info
55
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
Nächste SlideShare
Wird geladen in …5
×

BEM — Build ‘em Modular!

Talk (in English) for You Gotta Love Frontend 2015, June 8 — 9, Tel Aviv, Israel.

Abstract: Every web developer, designer or manager who supports huge project or tryes to reuse some parts of HTML + CSS anywhere else sooner or later will face with the same issues and most likely come to the idea of componentized web. It's rather popular now and was even described as a W3C standard Web Components.

But how exactly new are the new ideas and how useful is its realization?

In the frontend world since Internet Explorer 5.5 a lot of developers know and use BEM methodology that was created to solve exactly the same problems. During years of use it formed its own huge ecosystem that includes technologies, tools, libraries and active community. It is built and developed by developers within Yandex and outside that use it everywhere both in small such as promo page for a cat and high loaded projects such as Yandex services and Mail.ru. They are well aware of the problems that developers face.

During our talk we start from the beginning that covers CSS and design and will go on as far as you would wish to.

Video link https://www.youtube.com/watch?v=huQp7gr3WPE

Speakers' biography

Vladimir Grinenko, the head of BEM development team. HTML/CSS/JS-professional. BEM-addict. Answers BEM questions 24/7. Outside Yandex runs his own web development agency, consults projects and helps them stay healthy and wealthy with BEM.

Yelena Jetpyspayeva, BEM Developer Relations Specialist. Helps BEM team with coordination of an open source activity inside and outside Yandex and the community making sure everyone is happy with BEM. Outside Yandex volunteers for open source and helps developers run developer events. Dreamer of the better web and believer in true power of open source.

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

BEM — Build ‘em Modular!

  1. 1. 1
  2. 2. BEM — Building 'em modular Yelena Jetpyspayeva, Vladimir Grinenko, Yandex You Gotta Love FrontEnd 2015, June 8-9, Tel-Aviv 2
  3. 3. Vladimir •  4 years at Yandex •  Head of BEM Development Division at Yandex •  HTML/CSS/JS/BEM 24/7 •  tadatuta@yandex-team.ru •  @tadatuta •  github.com/tadatuta 3
  4. 4. Yelena •  4 years at Yandex •  BEM Developer Relations Programm Manager •  Techevents, marketing, devcommunity — come talk to me! •  mursya@yandex-team.ru •  @mursya •  github.com/mursya 4
  5. 5. Agenda •  What's BEM historically? •  What's BEM technically? •  Methodology •  Tools, frameworks and template engines •  Block libraries •  What BEM can do that others can't? •  How to start? 6
  6. 6. What's BEM historically? 7
  7. 7. Problems we faced •  Low speed of rendering •  Naming that does not help •  Any interaction with code was dangerous because of 0 in capsulation •  and made it possible not only for maintainment but for re-use too 16
  8. 8. Problems → Solution •  Long cascade affected speed of rendering... •  ... so, BEM helped us eliminate cascade •  by using block__element_modifier naming system 18
  9. 9. Problems → Solution •  CSS classes forced us to reinvent names everyday... •  ... so, with BEM we get a naming convention! 19
  10. 10. Problems → Solution •  0 incapsulation... •  ...so, BEM helped us incapsulate code on block level •  and made possible to re-use 20
  11. 11. Problems → Solution •  More demand on interactive interfaces... •  ...was not longer a threat •  BEM file structure gave an option to separate code according to technologies 21
  12. 12. What is BEM now? •  methodology •  libraries •  tools •  JS-framework •  templating engine •  engine for building docs and samples •  tests for blocks •  the community 24
  13. 13. What is BEM now? •  a development division at Yandex with 30+ frontenders •  400+ frontenders at Yandex.Services •  1500+ community developers •  a standard for frontender's CV in CIS 25
  14. 14. What's BEM technically? 29
  15. 15. What's BEM technically? •  Methodology •  Tools, frameworks and template engines •  Block libraries 30
  16. 16. Web development is... 31
  17. 17. Web development is a pain. 32
  18. 18. BEM methodology •  Teachs how to relieve that pain. •  Just a bunch of best practicies 33
  19. 19. Where pain comes from •  Support someone's else code •  Your own in a month •  #foot div div * 34
  20. 20. Where pain comes from •  Support someone's else code •  Refactoring •  Reuse •  Copy/paste doen't work •  Hard to tell what to copy •  Useless code •  Update is a nightmare 35
  21. 21. Where pain comes from •  Support someone's else code •  Refactoring •  Reuse •  A lot of different frameworks &apm; libs 36
  22. 22. What BEM can do that others can't 37
  23. 23. Abstraction •  speak the same terms •  code becomes self-documented •  possibility to update components appear 38
  24. 24. In short Block Elem Modifier 39
  25. 25. Block
  26. 26. Block,        elements
  27. 27. Block,        elements,        modifiers
  28. 28. Naming convention Block__Element_Modifier 45
  29. 29. Some of BEM principles •  Map document to BEM blocks — no tag or id selectors •  No CSS outside of blocks •  Independent blocks -> no global reset •  Avoid cascade 46
  30. 30. File system prj/ blocks/ header/ header.css header.js header.tmpl header.svg header.md 47
  31. 31. File system prj/ blocks/ header/ _theme/ header_theme_simple.css header_theme_full.css __logo/ header__logo.css 48
  32. 32. BEM tree Before: div > div > span After: block1 > block2 > block2__elem 49
  33. 33. What is BEM now? •  methodology •  libraries •  tools •  JS-framework •  templating engine •  engine for building docs and samples •  tests for blocks •  the community 50
  34. 34. BEM Platform: How to start? 51
  35. 35. Quick start •  bem.info •  git clone https://github.com/bem/project-stub.git 52
  36. 36. bem.info
  37. 37. BEM Block__Element_Modifier bem.info/forum @bem_en #b_ bem info@bem.info 55

×