Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BEM
Search
Luciano Battagliero
August 14, 2015
Programming
5
6.1k
BEM
An introduction to BEM and its core principles. MercadoLibre Front-end Meetup. August, 2015.
Luciano Battagliero
August 14, 2015
Tweet
Share
More Decks by Luciano Battagliero
See All by Luciano Battagliero
Scope & Closures in JavaScript
battaglr
1
250
Why you should care about whitespace
battaglr
4
280
SMACSS
battaglr
5
490
Other Decks in Programming
See All in Programming
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
6
230
VS Code extension: ドラッグ&ドロップでファイルを並び替える
ttrace
0
160
Removing Corepack
yosuke_furukawa
PRO
9
1.1k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.1k
dbt-ga4パッケージを実業務に導入してみた話
t_tokumaru_feedcorp
0
120
Progressive Web Apps for Rails developers
siaw23
2
530
Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025
yshmarov
1
600
データサイエンスのフルサイクル開発を実現する機械学習パイプライン
xcnkx
2
460
ファーストペンギンBot @Qiita Hackathon 2024 予選
dyson_web
0
210
Cohesion in Modeling and Design
mploed
3
180
Beyond the RuboCop Defaults
koic
2
480
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
320
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
42
6.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
Designing Experiences People Love
moore
138
23k
Producing Creativity
orderedlist
PRO
341
39k
Fireside Chat
paigeccino
32
2.9k
Designing with Data
zakiwarfel
98
5.1k
Optimizing for Happiness
mojombo
375
69k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Transcript
B__E_M
Hi, there! I’m Luciano Battagliero @battaglr
Block, Element, Modifier
Yandex
~2009
A little bit of context OOCSS ~2010 SMACSS ~2011
What is it?
It’s a methodology
Heavily complemented by a set of tools, libraries and a
complete technology stack
At its core BEM is an unified semantic for different
implementations
That being said, this talk will be focused mainly on
CSS
What does BEM solve?
Chaos /ˈkāˌäs/ noun 1. Complete disorder and confusion
There are two types of problems we face in CSS
Layout or cosmetic problems
Architectural problems
BEM attempts to help solving architecture related problems
Entity
A generic term to refer to blocks, elements or modifiers
Block
An independent and self-sufficient component of an interface
Provides structure, behaviour and appearance encapsulation
<dialog class="modal"> … </dialog> HTML
<dialog class="modal"> … </dialog> HTML
.modal { … } CSS
Blocks must be context independent, thus they should not have
direct influence over other blocks
<dialog class="modal"> <button class="btn"> … </button> </dialog> HTML
<dialog class="modal"> <button class="btn"> … </button> </dialog> HTML
/* Don’t do this */ .modal .btn { … }
CSS
/* Do this */ .modal__btn { … } CSS
Blocks can contain other blocks
<header class="header"> <nav class="nav"> … </nav> </header> HTML
<header class="header"> <nav class="nav"> … </nav> </header> HTML
Multiple instances of a block could be used across the
interface
<button class="btn"> … </button> … <dialog class="modal modal--message"> <button class="modal__confirm
btn"> … </button> </dialog> HTML
<button class="btn"> … </button> … <dialog class="modal modal--message"> <button class="modal__confirm
btn"> … </button> </dialog> HTML
<button class="btn"> … </button> … <dialog class="modal modal--message"> <button class="modal__confirm
btn"> … </button> </dialog> HTML
Element
An internal part of a block that can not be
used outside of it
Elements can contain other elements or blocks
<ul class="paginator"> <li class="paginator__page"> <a class="paginator__link"> … </a> </li> </ul>
HTML
<ul class="paginator"> <li class="paginator__page"> <a class="paginator__link"> … </a> </li> </ul>
HTML
<ul class="paginator"> <li class="paginator__page"> <a class="paginator__link"> … </a> </li> </ul>
HTML
Elements should not attempt to be a representation of the
DOM structure
<ul class="paginator"> <li class="paginator__page"> <!-- Don’t do this --> <a
class="paginator__page__link"> … </a> </li> </ul> HTML
<ul class="paginator"> <li class="paginator__page"> <!-- Don’t do this --> <a
class="paginator__page__link"> … </a> </li> </ul> HTML
<ul class="paginator"> <li class="paginator__page"> <!-- Don’t do this --> <a
class="paginator__page__link"> … </a> </li> </ul> HTML
A block may not contain any element
Modifier
A variation on the appearance or behavior of a block
or an element
<a class="btn btn--large"> … </a> HTML
<a class="btn btn--large"> … </a> HTML
<a class="btn btn--large"> … </a> HTML
<a class="btn btn--is-disabled"> … </a> HTML
<a class="btn btn--is-disabled"> … </a> HTML
<a class="btn btn--is-disabled"> … </a> HTML
Multiple modifiers can be used simultaneously on the same block
or element
<a class="btn btn--large btn--is-disabled"> … </a> HTML
<a class="btn btn--large btn--is-disabled"> … </a> HTML
<a class="btn btn--large btn--is-disabled"> … </a> HTML
Naming conventions
The main purpose of a class name is to be
used as a hook for adding style or behaviour
A class name should communicate information which helps to understand
its purpose
Remember that a class name can not be “unsemantic”[*]
The “official” syntax
/* Basic syntax */ .block__element_modifier CSS
/* Basic syntax */ .block__element_modifier CSS
/* Basic syntax */ .block__element_modifier CSS
/* Basic syntax */ .block__element_modifier CSS
/* Key-value modifier */ .block-or-element_modifier_value CSS
/* Key-value modifier */ .block-or-element_modifier_value CSS
/* Entities with compound names */ .block-name__element-name_modifier-name CSS
/* Entities with compound names */ .block-name__element-name_modifier-name CSS
/** * All possible combinations */ .block .block_modifier .block__element .block__element_modifier
CSS
/** * Don’t do any of these */ .element .block_modifier__element
.block__element__element CSS
The “popular” syntax
/* Basic syntax */ .block__element--modifier CSS
/* Basic syntax */ .block__element--modifier CSS
/* Basic syntax */ .block__element--modifier CSS
/* Basic syntax */ .block__element--modifier CSS
/* Entities with compound names */ .block-name__element-name--modifier-name CSS
/* Entities with compound names */ .block-name__element-name--modifier-name CSS
/** * All possible combinations */ .block .block--modifier .block__element .block__element--modifier
CSS
/** * Don’t do any of these */ .element .block--modifier__element
.block__element__element CSS
The “CamelCase” syntax
/* Basic syntax */ .Block-element--modifier CSS
/* Basic syntax */ .Block-element--modifier CSS
/* Basic syntax */ .Block-element--modifier CSS
/* Basic syntax */ .Block-element--modifier CSS
/* Entities with compound names */ .BlockName-elementName--modifierName CSS
/* Entities with compound names */ .BlockName-elementName--modifierName CSS
/** * All possible combinations */ .Block .Block--modifier .Block-element .Block-element--modifier
CSS
/** * Don’t do any of these */ .element .Block--modifier-element
.Block-element-element CSS
Syntax comparison
/* “Official” */ block-name__element-name_modifier-name /* “Popular” */ block-name__element-name--modifier-name /* “CamelCase”
*/ BlockName-elementName--modifierName CSS
/* “Official” */ block-name__element-name_modifier-name /* “Popular” */ block-name__element-name--modifier-name /* “CamelCase”
*/ BlockName-elementName--modifierName CSS
/* “Official” */ block-name__element-name_modifier-name /* “Popular” */ block-name__element-name--modifier-name /* “CamelCase”
*/ BlockName-elementName--modifierName CSS
/* “Official” */ block-name__element-name_modifier-name /* “Popular” */ block-name__element-name--modifier-name /* “CamelCase”
*/ BlockName-elementName--modifierName CSS
It has been scientifically proven that BEM class names are
ugly
Mix
A combination of different entities on a single DOM node
<input class="search__input input" /> HTML
<input class="search__input input" /> HTML
Implementation guidelines
Only define entities using class selectors
.icon { … } CSS
Use descendant selectors only when 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 outside of blocks
/* Don’t do this */ ul { list-style: none; }
CSS
/* Do this */ .menu { list-style: none; } CSS
This usually means no global styles and no global “resets”
That’s just a part of it!
There’s a lot more about BEM. Go to bem.info and
find out!
Questions?
Thanks!