An introduction to BEM and its core principles. MercadoLibre Front-end Meetup. August, 2015.
B__E_M
View Slide
Hi, there!I’m Luciano Battagliero@battaglr
Block,Element,Modifier
Yandex
~2009
A little bit of contextOOCSS ~2010SMACSS ~2011
What is it?
It’s a methodology
Heavily complemented by a setof tools, libraries and a completetechnology stack
At its core BEM is an unifiedsemantic for differentimplementations
That being said, this talk will befocused mainly on CSS
What doesBEM solve?
Chaos/ˈkāˌäs/noun1. Complete disorder and confusion
There are two types of problemswe face in CSS
Layout or cosmetic problems
Architectural problems
BEM attempts to help solvingarchitecture related problems
Entity
A generic term to refer to blocks,elements or modifiers
Block
An independent and self-sufficientcomponent of an interface
Provides structure, behaviour andappearance encapsulation
… HTML
.modal { … }CSS
Blocks must be context independent,thus they should not have directinfluence over other blocks
/* Don’t do this */.modal .btn { … }CSS
/* Do this */.modal__btn { … }CSS
Blocks can contain other blocks
Multiple instances of a block couldbe used across the interface
… ……HTML
Element
An internal part of a block thatcan not be used outside of it
Elements can contain otherelements or blocks
Elements should not attempt tobe a representation of theDOM structure
A block may not contain any element
Modifier
A variation on the appearance orbehavior of a block or an element
Multiple modifiers can be usedsimultaneously on the sameblock or element
…HTML
Namingconventions
The main purpose of a classname is to be used as a hook foradding style or behaviour
A class name should communicateinformation which helps tounderstand its purpose
Remember that a class namecan not be “unsemantic”[*]
The “official” syntax
/* Basic syntax */.block__element_modifierCSS
/* Key-value modifier */.block-or-element_modifier_valueCSS
/* Entities with compound names */.block-name__element-name_modifier-nameCSS
/*** All possible combinations*/.block.block_modifier.block__element.block__element_modifierCSS
/*** Don’t do any of these*/.element.block_modifier__element.block__element__elementCSS
The “popular” syntax
/* Basic syntax */.block__element--modifierCSS
/* Entities with compound names */.block-name__element-name--modifier-nameCSS
/*** All possible combinations*/.block.block--modifier.block__element.block__element--modifierCSS
/*** Don’t do any of these*/.element.block--modifier__element.block__element__elementCSS
The “CamelCase”syntax
/* Basic syntax */.Block-element--modifierCSS
/* Entities with compound names */.BlockName-elementName--modifierNameCSS
/*** All possible combinations*/.Block.Block--modifier.Block-element.Block-element--modifierCSS
/*** Don’t do any of these*/.element.Block--modifier-element.Block-element-elementCSS
Syntax comparison
/* “Official” */block-name__element-name_modifier-name/* “Popular” */block-name__element-name--modifier-name/* “CamelCase” */BlockName-elementName--modifierNameCSS
It has been scientifically proventhat BEM class names are ugly
Mix
A combination of different entitieson a single DOM node
HTML
Implementationguidelines
Only define entities using classselectors
.icon { … }CSS
Use descendant selectors onlywhen needed
/* Don’t do this */.menu .menu__item { … }CSS
/* Do this */.menu--horizontal .menu__item { … }CSS
Do not use type or id selectors
/* Don’t do this */button { … }CSS
/* Do this */.button { … }CSS
/* Don’t do this */#breadcrumb { … }CSS
/* Do this */.breadcrumb { … }CSS
Do not declare styles outsideof blocks
/* Don’t do this */ul {list-style: none;}CSS
/* Do this */.menu {list-style: none;}CSS
This usually means no global stylesand no global “resets”
That’s just apart of it!
There’s a lot more aboutBEM. Go to bem.infoand find out!
Questions?
Thanks!
battaglr
zerebom
nrslib
kishida
rmatsuoka
syukai
morikann
goutarouh
uhooi
techouse
chimame
huffon
texmeijin
searls
philhawksworth
palkan
eileencodes
morganepeng
jonrohan
thekraken
addyosmani
scottboms
holman
tammyeverts
tanoku