BEM

 BEM

An introduction to BEM and its core principles. MercadoLibre Front-end Meetup. August, 2015.

B35b6fc3b6a61787be1b3750511fbd95?s=128

Luciano Battagliero

August 14, 2015
Tweet

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!