BEM

1.

B__E_M

2.

Hi, there! I’m Luciano Battagliero @battaglr

3.

Block, Element, Modifier

4.

Yandex

5.

~2009

6.

A little bit of context OOCSS ~2010 SMACSS ~2011

7.

What is it?

8.

It’s a methodology

9.

Heavily complemented by a set of tools, libraries and a
complete technology stack

10.

At its core BEM is an unified semantic for different
implementations

11.

That being said, this talk will be focused mainly on
CSS

12.

What does BEM solve?

13.

Chaos /ˈkāˌäs/ noun 1. Complete disorder and confusion

14.

There are two types of problems we face in CSS

15.

Layout or cosmetic problems

16.

Architectural problems

17.

BEM attempts to help solving architecture related problems

18.

Entity

19.

A generic term to refer to blocks, elements or modifiers

20.

Block

21.

An independent and self-sufficient component of an interface

22.

Provides structure, behaviour and appearance encapsulation

23.

<dialog class="modal"> … </dialog> HTML

24.

<dialog class="modal"> … </dialog> HTML

25.

.modal { … } CSS

26.

Blocks must be context independent, thus they should not have
direct influence over other blocks

27.

<dialog class="modal"> <button class="btn"> … </button> </dialog> HTML

28.

<dialog class="modal"> <button class="btn"> … </button> </dialog> HTML

29.

/* Don’t do this */ .modal .btn { … }
CSS

30.

/* Do this */ .modal__btn { … } CSS

31.

Blocks can contain other blocks

32.

<header class="header"> <nav class="nav"> … </nav> </header> HTML

33.

<header class="header"> <nav class="nav"> … </nav> </header> HTML

34.

Multiple instances of a block could be used across the
interface

35.

<button class="btn"> … </button> … <dialog class="modal modal--message"> <button class="modal__confirm
btn"> … </button> </dialog> HTML

36.


37.


38.

Element

39.

An internal part of a block that can not be
used outside of it

40.

Elements can contain other elements or blocks

41.

<ul class="paginator"> <li class="paginator__page"> <a class="paginator__link"> … </a> </li> </ul>
HTML

42.

HTML

43.

HTML

44.

Elements should not attempt to be a representation of the
DOM structure

45.

<ul class="paginator"> <li class="paginator__page">  <a
class="paginator__page__link"> … </a> </li> </ul> HTML

46.


47.


48.

A block may not contain any element

49.

Modifier

50.

A variation on the appearance or behavior of a block
or an element

51.

<a class="btn btn--large"> … </a> HTML

52.


53.


54.

<a class="btn btn--is-disabled"> … </a> HTML

55.


56.


57.

Multiple modifiers can be used simultaneously on the same block
or element

58.

<a class="btn btn--large btn--is-disabled"> … </a> HTML

59.


60.


61.

Naming conventions

62.

The main purpose of a class name is to be
used as a hook for adding style or behaviour

63.

A class name should communicate information which helps to understand
its purpose

64.

Remember that a class name can not be “unsemantic”[*]

65.

The “official” syntax

66.

/* Basic syntax */ .block__element_modifier CSS

67.


68.


69.


70.

/* Key-value modifier */ .block-or-element_modifier_value CSS

71.

/* Key-value modifier */ .block-or-element_modifier_value CSS

72.

/* Entities with compound names */ .block-name__element-name_modifier-name CSS

73.

/* Entities with compound names */ .block-name__element-name_modifier-name CSS

74.

/** * All possible combinations */ .block .block_modifier .block__element .block__element_modifier
CSS

75.

/** * Don’t do any of these */ .element .block_modifier__element
.block__element__element CSS

76.

The “popular” syntax

77.

/* Basic syntax */ .block__element--modifier CSS

78.


79.


80.


81.

/* Entities with compound names */ .block-name__element-name--modifier-name CSS

82.

/* Entities with compound names */ .block-name__element-name--modifier-name CSS

83.

/** * All possible combinations */ .block .block--modifier .block__element .block__element--modifier
CSS

84.

/** * Don’t do any of these */ .element .block--modifier__element
.block__element__element CSS

85.

The “CamelCase” syntax

86.

/* Basic syntax */ .Block-element--modifier CSS

87.


88.


89.


90.

/* Entities with compound names */ .BlockName-elementName--modifierName CSS

91.

/* Entities with compound names */ .BlockName-elementName--modifierName CSS

92.

/** * All possible combinations */ .Block .Block--modifier .Block-element .Block-element--modifier
CSS

93.

/** * Don’t do any of these */ .element .Block--modifier-element
.Block-element-element CSS

94.

Syntax comparison

95.

/* “Official” */ block-name__element-name_modifier-name /* “Popular” */ block-name__element-name--modifier-name /* “CamelCase”
*/ BlockName-elementName--modifierName CSS

96.


97.


98.


99.

It has been scientifically proven that BEM class names are
ugly

100.

Mix

101.

A combination of different entities on a single DOM node

102.

<input class="search__input input" /> HTML

103.

<input class="search__input input" /> HTML

104.

Implementation guidelines

105.

Only define entities using class selectors

106.

.icon { … } CSS

107.

Use descendant selectors only when needed

108.

/* Don’t do this */ .menu .menu__item { … }
CSS

109.

/* Do this */ .menu--horizontal .menu__item { … } CSS

110.

Do not use type or id selectors

111.

/* Don’t do this */ button { … } CSS

112.

/* Do this */ .button { … } CSS

113.

/* Don’t do this */ #breadcrumb { … } CSS

114.

/* Do this */ .breadcrumb { … } CSS

115.

Do not declare styles outside of blocks

116.

/* Don’t do this */ ul { list-style: none; }
CSS

117.

/* Do this */ .menu { list-style: none; } CSS

118.

This usually means no global styles and no global “resets”

119.

That’s just a part of it!

120.

There’s a lot more about BEM. Go to bem.info and
find out!

121.

Questions?

122.

Thanks!

BEM

BEM

Want more?

Transcript