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.
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Más de Yelena Jetpyspayeva
Más de Yelena Jetpyspayeva (13)
Último
Último (20)
BEM — Build ‘em Modular!
- 1. 1
- 2. BEM — Building 'em modular Yelena Jetpyspayeva, Vladimir Grinenko, Yandex You Gotta Love FrontEnd 2015, June 8-9, Tel-Aviv 2
- 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. 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
- 6. 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
- 16. 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
- 18. Problems → Solution • Long cascade affected speed of rendering... • ... so, BEM helped us eliminate cascade • by using block__element_modifier naming system 18
- 19. Problems → Solution • CSS classes forced us to reinvent names everyday... • ... so, with BEM we get a naming convention! 19
- 20. Problems → Solution • 0 incapsulation... • ...so, BEM helped us incapsulate code on block level • and made possible to re-use 20
- 21. 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
- 24. What is BEM now? • methodology • libraries • tools • JS-framework • templating engine • engine for building docs and samples • tests for blocks • the community 24
- 25. 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
- 30. What's BEM technically? • Methodology • Tools, frameworks and template engines • Block libraries 30
- 32. Web development is a pain. 32
- 33. BEM methodology • Teachs how to relieve that pain. • Just a bunch of best practicies 33
- 34. Where pain comes from • Support someone's else code • Your own in a month • #foot div div * 34
- 35. 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
- 36. Where pain comes from • Support someone's else code • Refactoring • Reuse • A lot of different frameworks &apm; libs 36
- 37. What BEM can do that others can't 37
- 38. Abstraction • speak the same terms • code becomes self-documented • possibility to update components appear 38
- 40. Block
- 41. Block, elements
- 46. 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
- 49. BEM tree Before: div > div > span After: block1 > block2 > block2__elem 49
- 50. What is BEM now? • methodology • libraries • tools • JS-framework • templating engine • engine for building docs and samples • tests for blocks • the community 50
- 51. BEM Platform: How to start? 51
- 52. Quick start • bem.info • git clone https://github.com/bem/project-stub.git 52
- 53. bem.info