SlideShare une entreprise Scribd logo
1  sur  55
Télécharger pour lire hors ligne
1
BEM — Building 'em modular
Yelena Jetpyspayeva, Vladimir Grinenko, Yandex
You Gotta Love FrontEnd 2015, June 8-9, Tel-Aviv
2
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
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
BEM — Build ‘em Modular!
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
What's BEM historically?
7
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!
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
BEM — Build ‘em Modular!
Problems → Solution
•  Long cascade affected speed of rendering...
•  ... so, BEM helped us eliminate cascade
•  by using block__element_modifier naming system
18
Problems → Solution
•  CSS classes forced us to reinvent names everyday...
•  ... so, with BEM we get a naming convention!
19
Problems → Solution
•  0 incapsulation...
•  ...so, BEM helped us incapsulate code on block level
•  and made possible to re-use
20
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
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
What is BEM now?
•  methodology
•  libraries
•  tools
•  JS-framework
•  templating engine
•  engine for building docs and samples
•  tests for blocks
•  the community 24
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
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
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 what to copy
•  Useless code
•  Update is a nightmare
35
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
BEM — Build ‘em Modular!
BEM — Build ‘em Modular!
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 blocks -> no global reset
•  Avoid cascade
46
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 samples
•  tests for blocks
•  the community 50
BEM Platform: How to start?
51
Quick start
•  bem.info
•  git clone https://github.com/bem/project-stub.git
52
bem.info
BEM — Build ‘em Modular!
BEM
Block__Element_Modifier
bem.info/forum
@bem_en #b_
bem
info@bem.info
55

Contenu connexe

En vedette

Cómo hacer tu primera factura de traductor
Cómo hacer tu primera factura de traductorCómo hacer tu primera factura de traductor
Cómo hacer tu primera factura de traductorCelia Rico
 
พระราชบัญญัติว่าด้วยการทำความผิดทางคอมพิวเตอร์ พ.ศ. 2550
พระราชบัญญัติว่าด้วยการทำความผิดทางคอมพิวเตอร์ พ.ศ. 2550พระราชบัญญัติว่าด้วยการทำความผิดทางคอมพิวเตอร์ พ.ศ. 2550
พระราชบัญญัติว่าด้วยการทำความผิดทางคอมพิวเตอร์ พ.ศ. 2550Satapon Yosakonkun
 
ผลงานวิชาการและคลังความรู้กับประเด็นที่ควรคำนึงในยุคดิจิทัล Reference tools &...
ผลงานวิชาการและคลังความรู้กับประเด็นที่ควรคำนึงในยุคดิจิทัล Reference tools &...ผลงานวิชาการและคลังความรู้กับประเด็นที่ควรคำนึงในยุคดิจิทัล Reference tools &...
ผลงานวิชาการและคลังความรู้กับประเด็นที่ควรคำนึงในยุคดิจิทัล Reference tools &...Satapon Yosakonkun
 
Training and Performance Management Guide
Training and Performance Management GuideTraining and Performance Management Guide
Training and Performance Management GuideMitchell Manning Sr.
 
Design week - Chris Blow
Design week - Chris BlowDesign week - Chris Blow
Design week - Chris BlowAynne Valencia
 
NSTDA for Commercialization 2013
NSTDA for Commercialization 2013NSTDA for Commercialization 2013
NSTDA for Commercialization 2013Satapon Yosakonkun
 
2.2 el sistema cliente proveedor
2.2 el sistema cliente proveedor2.2 el sistema cliente proveedor
2.2 el sistema cliente proveedorHILARION MUÑOZ
 
偷拍喜剧短片介绍
偷拍喜剧短片介绍偷拍喜剧短片介绍
偷拍喜剧短片介绍pop104
 
Rachel Kerr, Creative Inc on their work for Skoff Pies at Outstanding By Design
Rachel Kerr, Creative Inc on their work for Skoff Pies at Outstanding By DesignRachel Kerr, Creative Inc on their work for Skoff Pies at Outstanding By Design
Rachel Kerr, Creative Inc on their work for Skoff Pies at Outstanding By DesignBank of Ireland
 

En vedette (20)

Cómo hacer tu primera factura de traductor
Cómo hacer tu primera factura de traductorCómo hacer tu primera factura de traductor
Cómo hacer tu primera factura de traductor
 
презентация23
презентация23презентация23
презентация23
 
พระราชบัญญัติว่าด้วยการทำความผิดทางคอมพิวเตอร์ พ.ศ. 2550
พระราชบัญญัติว่าด้วยการทำความผิดทางคอมพิวเตอร์ พ.ศ. 2550พระราชบัญญัติว่าด้วยการทำความผิดทางคอมพิวเตอร์ พ.ศ. 2550
พระราชบัญญัติว่าด้วยการทำความผิดทางคอมพิวเตอร์ พ.ศ. 2550
 
ผลงานวิชาการและคลังความรู้กับประเด็นที่ควรคำนึงในยุคดิจิทัล Reference tools &...
ผลงานวิชาการและคลังความรู้กับประเด็นที่ควรคำนึงในยุคดิจิทัล Reference tools &...ผลงานวิชาการและคลังความรู้กับประเด็นที่ควรคำนึงในยุคดิจิทัล Reference tools &...
ผลงานวิชาการและคลังความรู้กับประเด็นที่ควรคำนึงในยุคดิจิทัล Reference tools &...
 
презентация.Pptxлёша
презентация.Pptxлёшапрезентация.Pptxлёша
презентация.Pptxлёша
 
спасская башня
спасская башняспасская башня
спасская башня
 
ломоносов
ломоносовломоносов
ломоносов
 
Training and Performance Management Guide
Training and Performance Management GuideTraining and Performance Management Guide
Training and Performance Management Guide
 
моя фамилия.лукашова
моя фамилия.лукашовамоя фамилия.лукашова
моя фамилия.лукашова
 
Almeria
AlmeriaAlmeria
Almeria
 
Design week - Chris Blow
Design week - Chris BlowDesign week - Chris Blow
Design week - Chris Blow
 
TWERM
TWERMTWERM
TWERM
 
NSTDA for Commercialization 2013
NSTDA for Commercialization 2013NSTDA for Commercialization 2013
NSTDA for Commercialization 2013
 
создание фильма в Movie Maker
создание фильма в Movie Makerсоздание фильма в Movie Maker
создание фильма в Movie Maker
 
презентация ирины
презентация ириныпрезентация ирины
презентация ирины
 
проект солдатова дениса
проект  солдатова денисапроект  солдатова дениса
проект солдатова дениса
 
2.2 el sistema cliente proveedor
2.2 el sistema cliente proveedor2.2 el sistema cliente proveedor
2.2 el sistema cliente proveedor
 
偷拍喜剧短片介绍
偷拍喜剧短片介绍偷拍喜剧短片介绍
偷拍喜剧短片介绍
 
Rachel Kerr, Creative Inc on their work for Skoff Pies at Outstanding By Design
Rachel Kerr, Creative Inc on their work for Skoff Pies at Outstanding By DesignRachel Kerr, Creative Inc on their work for Skoff Pies at Outstanding By Design
Rachel Kerr, Creative Inc on their work for Skoff Pies at Outstanding By Design
 
User Manage
User ManageUser Manage
User Manage
 

Plus de Yelena Jetpyspayeva

Building developer community in Russia
Building developer community in RussiaBuilding developer community in Russia
Building developer community in RussiaYelena Jetpyspayeva
 
inFront: на передовой событий в мире фронтенда
inFront: на передовой событий в мире фронтендаinFront: на передовой событий в мире фронтенда
inFront: на передовой событий в мире фронтендаYelena Jetpyspayeva
 
Яндекс.Events на Я.Субботнике в Риге, 6 апреля 2013 года
Яндекс.Events на Я.Субботнике в Риге, 6 апреля 2013 годаЯндекс.Events на Я.Субботнике в Риге, 6 апреля 2013 года
Яндекс.Events на Я.Субботнике в Риге, 6 апреля 2013 годаYelena Jetpyspayeva
 
Promoting New Media in Central Asia
Promoting New Media in Central AsiaPromoting New Media in Central Asia
Promoting New Media in Central AsiaYelena Jetpyspayeva
 
Neweurasia.net at Educamp Almaty 2009
Neweurasia.net at Educamp Almaty 2009Neweurasia.net at Educamp Almaty 2009
Neweurasia.net at Educamp Almaty 2009Yelena Jetpyspayeva
 
Barcamp Central Asia Kazakhstan Concept Ru
Barcamp Central Asia Kazakhstan Concept RuBarcamp Central Asia Kazakhstan Concept Ru
Barcamp Central Asia Kazakhstan Concept RuYelena Jetpyspayeva
 
Bar Camp Central Asia Kazakhstan Concept Eng
Bar Camp Central Asia Kazakhstan Concept EngBar Camp Central Asia Kazakhstan Concept Eng
Bar Camp Central Asia Kazakhstan Concept EngYelena Jetpyspayeva
 
Barcamp Central Asia Kazakhstan Eng
Barcamp Central Asia Kazakhstan EngBarcamp Central Asia Kazakhstan Eng
Barcamp Central Asia Kazakhstan EngYelena Jetpyspayeva
 
Barcamp Central Asia Kazakhstan рус
Barcamp Central Asia Kazakhstan русBarcamp Central Asia Kazakhstan рус
Barcamp Central Asia Kazakhstan русYelena Jetpyspayeva
 

Plus de Yelena Jetpyspayeva (13)

Building developer community in Russia
Building developer community in RussiaBuilding developer community in Russia
Building developer community in Russia
 
News and plan of BEM community
News and plan of BEM communityNews and plan of BEM community
News and plan of BEM community
 
BEM Community
BEM CommunityBEM Community
BEM Community
 
inFront: на передовой событий в мире фронтенда
inFront: на передовой событий в мире фронтендаinFront: на передовой событий в мире фронтенда
inFront: на передовой событий в мире фронтенда
 
Яндекс.Events на Я.Субботнике в Риге, 6 апреля 2013 года
Яндекс.Events на Я.Субботнике в Риге, 6 апреля 2013 годаЯндекс.Events на Я.Субботнике в Риге, 6 апреля 2013 года
Яндекс.Events на Я.Субботнике в Риге, 6 апреля 2013 года
 
Promoting New Media in Central Asia
Promoting New Media in Central AsiaPromoting New Media in Central Asia
Promoting New Media in Central Asia
 
Neweurasia.net at Educamp Almaty 2009
Neweurasia.net at Educamp Almaty 2009Neweurasia.net at Educamp Almaty 2009
Neweurasia.net at Educamp Almaty 2009
 
Kazakhstan At Glance
Kazakhstan At GlanceKazakhstan At Glance
Kazakhstan At Glance
 
Media Situation In Central Asia
Media Situation In Central AsiaMedia Situation In Central Asia
Media Situation In Central Asia
 
Barcamp Central Asia Kazakhstan Concept Ru
Barcamp Central Asia Kazakhstan Concept RuBarcamp Central Asia Kazakhstan Concept Ru
Barcamp Central Asia Kazakhstan Concept Ru
 
Bar Camp Central Asia Kazakhstan Concept Eng
Bar Camp Central Asia Kazakhstan Concept EngBar Camp Central Asia Kazakhstan Concept Eng
Bar Camp Central Asia Kazakhstan Concept Eng
 
Barcamp Central Asia Kazakhstan Eng
Barcamp Central Asia Kazakhstan EngBarcamp Central Asia Kazakhstan Eng
Barcamp Central Asia Kazakhstan Eng
 
Barcamp Central Asia Kazakhstan рус
Barcamp Central Asia Kazakhstan русBarcamp Central Asia Kazakhstan рус
Barcamp Central Asia Kazakhstan рус
 

Dernier

Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Dernier (20)

Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

BEM — Build ‘em Modular!