Thinking in BEM
About the author
Val Kotlarov Hoffman
- Web development veteran
- Founder ofvkhey.com
- Client Side: HTML, CSS, JS, Ember, React, Angular
- Server Side: Ruby, Rails, Linux etc.
- Current interests: React Native, Machine Learning
Thinking in BEM
Disclaimer
DIY
This talk is about my adventures and best practices learnt from the experience. I hope this will give you a better understanding of BEM. It’s not meant to spoon feed you. But it will provide you with the right tools to build UIs more effectively so you can later join me in my journey and extend the knowledge with your experience.
Thinking in BEM
Who cares
Once upon a time
Thinking in BEM
Let's think in BEM
Reusable, refactorable, stable
To think in BEM means to think in reusable UI components: with ease of refactoring in mind. Not easily breakable, but if broken, it will be easy to fix. It will be possible to "throw" them anywhere, and they will just work. It means to plan a bit more, but eventually do less while enjoying the creative process and not drowning in the mechanical job. And... eventually stable UI means significantly less bugs!
Thinking in BEM
Another perspective
The third dimension
The methodology seems to be very easy to grasp. However, you need to get used to it to fully understand it. A good metaphor - it's like clearly looking and seeing with one eye, and then with another. But when looking with both eyes then you see another dimension, the depth. Same here, you might be excited, but later discover that it's not that trivial in different situations. Experiment, be creative and courageous and you'll be fine.
Thinking in BEM
What is BEM
What's BEM?
- B - Block
- E - Element
- M - Modifier
- A methodology / a naming convention
- Not a framework
- No libraries needed, only plain CSS
Thinking in BEM
What is BEM
Inventors & Usage
- Invented at Yandex
- Used by: SeekingAlpha,
- BBC,
- Google Material Design Lite
- many others...
Thinking in BEM
Motivation
Problems with CSS
- Spaghetti code
- Not self-descriptive e.g. it's not clear from the CSS rule to which HTML parts it will apply.
- For example add some style for a menu: div ul {Problem is, it can be applied to anything.
…
}
Thinking in BEM
Motivation
Problems with CSS
- If elsewhere someone adds:span div ul {it can change the ul we defined previously. So what exactly are we defining with plain CSS rules?
…
} - There's no strict control over which HTML is affected by CSS rules.
Thinking in BEM
Motivation
Problems with CSS
- You can argue that the following will solve the problem:.my-cool-plugin ul.my-menu {
…
}
Thinking in BEM
Motivation
Problems with CSS
- That could help, but not much - the following will break that menu:#my-cool-page ul {
…
} - There are many examples and all derive from the nature of CSS cascadeness, specificity etc.
Thinking in BEM
Motivation
Problems with CSS
- Difficult to copy existing code to other projects
- Time consuming - need to write over and over CSS for each new project. More time for fixing development bugs.
- Slower page rendering
- This slide show was written with BEM!
Thinking in BEM
Create a menu
Forget about DOM hierarchy
Menu in SCSS
.body-class {
.menu-wrapper {
ul { width: 600px; height:240px; background: red; }
}
}
BEM - Block:
.c-menu { width: 600px; height:240px; background: red; }Thinking in BEM
Create a menu
Describe just B-E-M's
BEM - element
.c-menu__menu-element {
float: left; min-width: 50px; line-height: 240px;
}BEM - element's modifier
.c-menu__menu-element--red { background: red; }Thinking in BEM
Create a menu
Simplest menu example
Block + Element + Modifier in SCSS
.c-menu { width: 600px; height:240px; background: red;
&__menu-element { float: left; min-width: 50px; line-height: 240px;
&--red { float: left; min-width: 50px; line-height: 240px; background: red; }
}
}Thinking in BEM
Create a menu
But what if...
OMG, MY PM WANTS THAT MENU TO BE BLUE ON SOME OF THE PAGES… Think a moment… You'd probably add a class to the <body>
<body class='blue-page'>and then you’re overriding your
.blue-page .menu { … blue stuff here }Thinking in BEM
Create a menu
Or what if...
Or maybe, you create a new CSS
.menu-blue { … and then copy all of the old styles here }How about this?
<div class="menu blue-menu"/>Thinking in BEM
Create a menu
Simplest menu example
With BEM we have:
.c-menu { width: 600px; height:240px; background: red;
&--blue { background: blue; }
&__menu-element { float: left; min-width: 50px; line-height: 240px;
&--red { background: red; }
}
}Thinking in BEM
Create a menu
Resulting CSS
.c-menu {
width: 600px;
height: 240px;
background: red;
}
.c-menu--blue {
background: blue;
}
.c-menu__menu-element {
float: left;
min-width: 50px;
line-height: 240px;
}
.c-menu__menu-element--red {
background: red;
}
.c-menu__menu-element--orange {
background: orange;
}Thinking in BEM
Create a portfolio
Another example
Thinking in BEM
Create a portfolio
Plan - Slim
Thinking in BEM
Create a portfolio
Plan - BEM CSS
Thinking in BEM
Create a portfolio
Implementation
Portfolio 1
rename
|
delete
edit
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
Thinking in BEM
Create a portfolio
Let's insert it into another element!
Portfolio 1
rename
|
delete
edit
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
.c-menu {
width: 600px;
height: 240px;
background: red;
}
.c-menu--blue {
background: blue;
}
.c-menu__menu-element {
float: left;
min-width: 50px;
line-height: 240px;
}
.c-menu__menu-element--red {
background: red;
}
.c-menu__menu-element--orange {
background: orange;
}Thinking in BEM
Create a portfolio
Resulting CSS
Portfolio 1
rename
|
delete
edit
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
AAPL
Apple Inc.
-√\/
$115.19
1.89 (1.7%)
.c-menu {
width: 600px;
height: 240px;
background: red;
}
.c-menu--blue {
background: blue;
}
.c-menu__menu-element {
float: left;
min-width: 50px;
line-height: 240px;
}
.c-menu__menu-element--red {
background: red;
}
.c-menu__menu-element--orange {
background: orange;
}Thinking in BEM
Create a portfolio
Resulting CSS
.r-reset {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
line-height: 1;
vertical-align: baseline;
display: block;
}
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
line-height: 1;
vertical-align: baseline;
display: block;
}
Usage:
.c-portfolio { @extend .r-reset;
.....
}
.....
}
Thinking in BEM
Conslusion
Final thoughts
- A word about js- prefixes
- Can extend like block__element--modifier__child?
- I hope you enjoyed this talk and will find the material both fun and productive!
Thinking in BEM
Thanks!
It was a great pleasure
Special thanks to:
- My dear wife Lena for tolerating me
- You for listening
Resources
- Thinking in BEM on GitHub or on BitBucket
- CSS For Developers
- BEM Naming conventions
Thinking in BEM
Credits
More Credits