BEM

An introduction to BEM and its core principles.
Presented at the Mercado Libre Front-end Meetup in August 2015.

Transcript

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. <button class="btn"> … </button> … <dialog class="modal modal--message"> <button class="modal__confirm btn"> … </button> </dialog> HTML
37. <button class="btn"> … </button> … <dialog class="modal modal--message"> <button class="modal__confirm btn"> … </button> </dialog> HTML
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. <ul class="paginator"> <li class="paginator__page"> <a class="paginator__link"> … </a> </li> </ul> HTML
43. <ul class="paginator"> <li class="paginator__page"> <a class="paginator__link"> … </a> </li> </ul> HTML
44. Elements should not attempt to be a representation of the DOM structure
45. <ul class="paginator"> <li class="paginator__page"> <!-- Don’t do this --> <a class="paginator__page__link"> … </a> </li> </ul> HTML
46. <ul class="paginator"> <li class="paginator__page"> <!-- Don’t do this --> <a class="paginator__page__link"> … </a> </li> </ul> HTML
47. <ul class="paginator"> <li class="paginator__page"> <!-- Don’t do this --> <a class="paginator__page__link"> … </a> </li> </ul> HTML
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. <a class="btn btn--large"> … </a> HTML
53. <a class="btn btn--large"> … </a> HTML
54. <a class="btn btn--is-disabled"> … </a> HTML
55. <a class="btn btn--is-disabled"> … </a> HTML
56. <a class="btn btn--is-disabled"> … </a> HTML
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. <a class="btn btn--large btn--is-disabled"> … </a> HTML
60. <a class="btn btn--large btn--is-disabled"> … </a> HTML
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. /* Basic syntax */ .block__element_modifier CSS
68. /* Basic syntax */ .block__element_modifier CSS
69. /* Basic syntax */ .block__element_modifier CSS
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. /* Basic syntax */ .block__element--modifier CSS
79. /* Basic syntax */ .block__element--modifier CSS
80. /* Basic syntax */ .block__element--modifier CSS
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. /* Basic syntax */ .Block-element--modifier CSS
88. /* Basic syntax */ .Block-element--modifier CSS
89. /* Basic syntax */ .Block-element--modifier CSS
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. /* “Official” */ block-name__element-name_modifier-name /* “Popular” */ block-name__element-name--modifier-name /* “CamelCase” */ BlockName-elementName--modifierName CSS
97. /* “Official” */ block-name__element-name_modifier-name /* “Popular” */ block-name__element-name--modifier-name /* “CamelCase” */ BlockName-elementName--modifierName CSS
98. /* “Official” */ block-name__element-name_modifier-name /* “Popular” */ block-name__element-name--modifier-name /* “CamelCase” */ BlockName-elementName--modifierName CSS
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!