Introduction to the BEM Methodology

1. BEM METHODOLOGY
Vittorio Zaccaria
September 17th, 2014

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

3. WHAT YOU WILL GET FROM THIS SEMINAR

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

5. know which tools can
help you manage your CSS projects

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

7. GOING CRAZY WITH CSS

8. which selectors match a given element?

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

10. yup, it can become overwhelming

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

12. specificity

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

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

15. adjustment rules

16. .header
.header
.logo
.logo
.header .logo

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

18. A MORE STRUCTURED APPROACH

19. CSS Design CSS Engineering (Scientific Principles)

20. Code independence, predictability
HTML

21. HTML
Project 2
Project 1
Code reuse
HTML

22. BLOCK ELEMENT MODIFIER

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

24. 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…

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

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

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

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

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

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

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

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

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

39. .art-preview
element of .art-preview

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

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

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

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

45. NESTING

48. tab block
.tab {
...
}
CSS

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

50. NON BEM

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

52. BEM

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

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

55. DRAWBACKS

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

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

58. 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/

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

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

61. WHAT ABOUT SMACSS - MVCSS?

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

63. THE FUTURE

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

65. create your own tags!
HTML
<!-- 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>

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

67. encapsulation with the Shadow DOM

68. THANKS!