BEM Methodology — @Frontenders Ticino —17/09/2014

BEM METHODOLOGY
Vittorio Zaccaria
September 17th, 2014

ME
Enthusiast about Javascript, CSS and Web
technologies
Looking forward to invest into promising
swiss startups
www.vittoriozaccaria.net
vittorio.zaccaria@gmail.com

WHAT YOU WILL GET FROM THIS SEMINAR

understand how to deal with the
complexity of your CSS (BEM)

know which tools can
help you manage your CSS projects

a look at the future of front-end design
technologies (web components)

which selectors match a given element?

.label
.label.left
.left
.label.left
CSS

yup, it can become overwhelming

.label
.label.left.small
.left
.small
.label.left
.label.small
.left.small
.label.left.small
CSS

#a
{
background-color : blue;
}
.big.container > .b.c
{
background-color : red;
}
.big.container
#a.b.c
CSS

#a
{
background-color : blue;
}
#a.b.c
.big.container > .b.c
{
background-color : red;
}
.big.container
CSS

.header
.header
.logo
.logo
.header .logo

cognitive load might mean
waste of time and money in your team

CSS Design CSS Engineering (Scientific Principles)

Code independence, predictability
HTML

HTML
Project 2
Project 1
Code reuse
HTML

it’s a set of formalized guidelines developed by
Yandex, RU in the past few years
it is mainly a naming and structuring
methodology for CSS/HTML

How to define and
structure modules for
CSS, enabling separation
How to of concerns and reuse
organize files
Tools for manipulating
BEM compliant specs
although it has more…

BEM defines the concept of “block” for CSS
we will call it also “component” or “module”

block
• html + style rules
• independent w.r.t. other blocks
• can be used in different parts/projects

BEM Methodology — @Frontenders Ticino —17/09/2014

how BEM would define this block
1. use only one class - they flatten specificity
2. no positioning information in it
3. dont introduce relative adjustment

.art-preview {
width: 30%;
...
}
.art-preview
CSS
no parent blocks here, or
we’d compromise reuse and mobility

modifier
changes a small amount of properties of a block
it is another class to be added to the block itself

.art-preview {
width: 30%;
}
!
.art-preview__size_small {
width: 15%;
...
}
!
.art-preview
CSS
.art-preview.art-preview__size_small

name spacing for modifiers
.art-preview__size_small
Separator
type of modification
value of modification
CSS

modifiable through JS
block(‘art-preview’).toggle(‘size_small’)
adds/removes class
JS

element
styles only a piece of a block
this piece can’t live outside the block

.art-preview
element of .art-preview

name spacing for elements
.art-preview--title
Separator
name of the element
CSS

.art-preview {
...
}
!
.art-preview--title {
font-size: 1.5rem;
...
}
.art-preview
CSS
.art-preview--title

.art-preview--title {
font-size: 1.5rem;
...
}
!
.art-preview__size_small .art-preview—title
{
font-size: 1.2rem;
...
}
.art-preview--title
.art-preview__size_small .art-preview--title
CSS

tab block
.tab {
...
}
CSS

tab block
.tab {
...
}
!
.card {
...
}
CSS
card block

tab block
.tab {
...
}
!
.card {
...
}
!
.tab .card {
// set margins
}
CSS
card block

tab block
.tab {
...
}
!
.card {
...
}
!
.card.tab——card {
// set margins
}
CSS
card block
not using generations to express nesting
.card.tab--card

child changes parent
.form.form——has—modal
.modal
.form {
...
}
!
.modal {
...
}
!
.form.form——has—modal {
// disable input
}
CSS

long names
.article-preview——title.article-preview——
title__highlighted
CSS

abbreviate
.artp——title.artp——title__hl
CSS

use css preprocessors
LESS
.header {
background: white;
&——title {
font: bold 24px/1 sans-serif;
&__featured {
font-size: 30px;
}
}
}
CSS
.header {
background: white;
}
.header——title {
font: bold 24px/1 sans-serif;
}
.header——title__featured {
font-size: 30px;
}
src: http://frontendbabel.info/articles/bem-with-css-preprocessors/

BEMTO
HTML
src: https://github.com/kizu/bemto
JADE
+b.block1
+e.element1 Foo
+b.block2
+e('a')(href="#bar").element Bar
+e.element2 Baz
<div class="block1">
<div class="block1__element1">
Foo
</div>
<div class="block2">
<a class="block2__element"
href="#bar">Bar</a>
</div>
<div class="block1__element2">
Baz
</div>
</div>

seriously, try jade, even without BEM
http://jade-lang.com/

MVCSS BEM SMACSS
block
element
modifier
Scalable and modular CSS
https://smacss.com/
base
applies to tags and ids
layout Nesting similar to
grids and stuff
modules
subclassing
states
Modular View CSS
http://mvcss.github.io/
foundation reset
structures
not reusable patterns
components reusable patterns

Polymer
http://www.polymer-project.org/

create your own tags!
HTML

<script src="components/platform/platform.js"></script>
!

<link rel="import" href="counter.html">
!

<my-counter counter="10">Points</my-counter>

HTML

<polymer-element name="my-counter" attributes="counter">
<template>
<style> /*...*/ </style>
<div id="label"><content></content></div>
Value: <span id="counterVal">{{counter}}</span><br>
<button on-tap="{{increment}}">Increment</button>
</template>
<script>
Polymer({
counter: 0, // Default value
counterChanged: function() {
this.$.counterVal.classList.add('highlight');
},
increment: function() {
this.counter++;
}
});
</script>
</polymer-element>

encapsulation with the Shadow DOM

BEM Methodology — @Frontenders Ticino —17/09/2014

Related slideshows

More Related Content

BEM Methodology — @Frontenders Ticino —17/09/2014