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

BEM METHODOLOGY

Vittorio Zaccaria September 17th, 2014

Enthusiast about Javascript, CSS and Web technologies

Looking forward to invest into promising swiss startups

www.vittoriozaccaria.net vittorio.zaccaria@gmail.com

ME

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)

GOING CRAZY WITH CSS

which selectors match a given element?

.label

.label.left.left

.label.left

CSS

yup, it can become overwhelming

.label

.label.left.small

.left

.label.left

.small

.label.small

.label.left.small

.left.small

CSS

specificity

#a{ background-color : blue; }

.big.container > .b.c { background-color : red; }

#a.b.c

.big.container

CSS

#a{ background-color : blue; }

#a.b.c

.big.container > .b.c { background-color : red; }

.big.container

CSS

adjustment rules

.header

.header

.logo.logo

.header .logo

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

A MORE STRUCTURED APPROACH

CSS Design CSS Engineering(Scientific Principles)

Code independence, predictability

HTML

Project 2

HTML

Project 1

Code reuse

HTML

BLOCK ELEMENT MODIFIER

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 of concerns and reuseHow to

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”

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

block

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-previewCSS

no parent blocks here, or we’d compromise reuse and mobility

changes a small amount of properties of a block

it is another class to be added to the block itself

modifier

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

.art-preview

.art-preview.art-preview__size_small

CSS

.art-preview__size_small

name spacing for modifiers

Separator

type of modification value of modification

CSS

block(‘art-preview’).toggle(‘size_small’)

modifiable through JS

adds/removes class

JS

styles only a piece of a block

this piece can’t live outside the block

element

.art-preview

element of .art-preview

.art-preview--title

name spacing for elements

Separator

name of the elementCSS

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

.art-previewCSS

.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

.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

NESTING

tab block

.tab { ... }

CSS

tab block

.tab { ... } !.card { ... }

CSS

card block

NON BEM

tab block

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

CSS

card block

BEM

tab block

.tab { ... } !.card { ... } !.card.tab——card { // set margins }

CSS

card block

not using generations to express nesting

.card.tab--card

.form.form——has—modal

.modal.form { ... } !.modal { ... } !.form.form——has—modal { // disable input }

CSS

child changes parent

DRAWBACKS

long names

.article-preview——title.article-preview——title__highlighted

CSS

abbreviate

.artp——title.artp——title__hl

CSS

use css preprocessors

.header { background: white; &——title { font: bold 24px/1 sans-serif; &__featured { font-size: 30px; } } }

LESS

src: http://frontendbabel.info/articles/bem-with-css-preprocessors/

.header { background: white; } .header——title { font: bold 24px/1 sans-serif; } .header——title__featured { font-size: 30px; }

CSS

BEMTO

src: https://github.com/kizu/bemto

+b.block1 +e.element1 Foo +b.block2 +e('a')(href="#bar").element Bar +e.element2 Baz

JADE

<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>

HTML

seriously, try jade, even without BEM

http://jade-lang.com/

WHAT ABOUT SMACSS - MVCSS?

BEM SMACSSMVCSS

block

element

modifier

Scalable and modular CSS https://smacss.com/

base

layoutNesting similar to

applies to tags and ids

grids and stuff

modules

subclassing

states

Modular View CSS http://mvcss.github.io/

foundationreset

componentsreusable patterns

structuresnot reusable patterns

THE FUTURE

Polymerhttp://www.polymer-project.org/

create your own tags!

<!-- Polyfill Web Components support for older browsers --> <script src="components/platform/platform.js"></script> !<!-- Import element --> <link rel="import" href="counter.html"> !<!-- Use element --> <my-counter counter="10">Points</my-counter>

HTML

<!-- Define element --> <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>

HTML

encapsulation with the Shadow DOM

THANKS!