bem methodology — @frontenders ticino —17/09/2014
DESCRIPTION
Introduction to the BEM MethodologyTRANSCRIPT
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 [email protected]
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!