BEM

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!