The document discusses the Block Element Modifier (BEM) methodology for organizing CSS and HTML code into independent reusable components. It provides examples of applying BEM to structure a logo block, its elements, and modifiers. BEM tools can be used to generate file structures for blocks and automatically import all CSS. The methodology aims to improve code reusability, separation of concerns, and enable specialist work between developers.

1. БЭМ!
Виталий Харисов
Сергей Бережной
РИТ++, Москва, 26 апреля 2011 года

10. БЭМ-методология

11. Методология
учение об организации деятельности
methodolog.ru

24. Пример реализации
b-head-logo

27. <div class="b-head-logo">
<img class="b-head-logo__logo"
src="URL" alt="Яндекс"/>
</div>

28. <div class="b-head-logo">
<img class="b-head-logo__logo"
src="URL" alt="Яндекс"/>
</div>

29. <div class="b-head-logo">
<img class="b-head-logo__logo"
src="URL" alt="Яндекс"/>
</div>

30. <div class="b-head-logo">
<img class="b-head-logo__logo"
src="URL" alt="Яндекс"/>
</div>

33. <div class="b-head-logo">
<img class="b-head-logo__logo"/>
<div class="b-head-logo__name">
картинки
</div>
</div>

34. <div class="b-head-logo">
<img class="b-head-logo__logo"/>
<div class="b-head-logo__name">
картинки
</div>
</div>

38. <div class="b-head-logo">
<img class="b-head-logo__logo"/>
<div class="b-head-logo__name">
картинки
</div>
<i class="b-head-logo__nda"/>
</div>

41. <div class="b-head-logo
b-head-logo_size_big">
<img class="b-head-logo__logo"/>
</div>

42. <div class="b-head-logo
b-head-logo_size_big">
<img class="b-head-logo__logo"/>
</div>

43. <div class="b-head-logo
b-head-logo_size_big">
<img class="b-head-logo__logo"/>
</div>

44. <div class="b-head-logo
b-head-logo_size_big">
<img class="b-head-logo__logo"/>
</div>

45. Файловая структура

46. blocks/
b-head-logo/
…

47. blocks/
b-head-logo/
b-head-logo.css

48. blocks/
b-head-logo/
b-head-logo.css
b-head-logo.png

49. blocks/
b-head-logo/
b-head-logo.css
b-head-logo.png

50. b-head-logo.css
.b-head-logo
{
margin: auto;
text-align: center;
}

51. blocks/
b-head-logo/
__logo/
…
b-head-logo.css
b-head-logo.png

52. blocks/
b-head-logo/
__logo/
b-head-logo__logo.css
b-head-logo.css
b-head-logo.png

53. blocks/
b-head-logo/
__logo/
b-head-logo__logo.css
__name/
b-head-logo__name.css
b-head-logo.css
b-head-logo.png

54. b-head-logo__logo.css
.b-head-logo__logo
{
padding: 1.1em 0 0.47em;
}

55. blocks/
b-head-logo/
_size/
…

56. blocks/
b-head-logo/
_size/
b-head-logo_size_big.css

57. blocks/
b-head-logo/
_size/
b-head-logo_size_big.css

58. blocks/
b-head-logo/
_size/
b-head-logo_size_big.css

59. b-head-logo_size_big.css
.b-head-logo_size_big
{
…
}

60. БЭМ-инструменты
github.com/bem/bem-tools

61. blocks/
b-head-logo/
…
> bem create level blocks-intranet

62. blocks/
b-head-logo/
…
blocks-intranet/
…

63. blocks/
b-head-logo/
…
blocks-intranet/
> bem create block -t css
b-head-logo

64. blocks/
b-head-logo/
…
blocks-intranet/
b-head-logo/
b-head-logo.css

65. blocks/
b-head-logo/
…
blocks-intranet/
> bem create elem
-b b-head-logo
-t css
nda

66. blocks/
b-head-logo/
…
blocks-intranet/
b-head-logo/
__nda/
b-head-logo__nda.css
b-head-logo.css

67. > bem build
-l blocks
-l blocks-intranet
-t css
…

68. @import url(blocks/b-head-logo/
b-head-logo.css);
@import url(blocks/b-head-logo
__name/b-head-logo__name.css);
…
@import url(blocks-intranet/
b-head-logo/b-head-logo.css);
…

69. @import url(blocks/b-head-logo/
b-head-logo.css);
@import url(blocks/b-head-logo
__name/b-head-logo__name.css);
…
@import url(blocks-intranet/
b-head-logo/b-head-logo.css);
…

70. @import url(blocks/b-head-logo/
b-head-logo.css);
@import url(blocks/b-head-logo
__name/b-head-logo__name.css);
…
@import url(blocks-intranet/
b-head-logo/b-head-logo.css);
…

71. БЭМ!

72. Разделение кода на части

76. Специализация людей

79. Ссылки

80. — БЭМ-методология
github.com/bem/bem-method

81. — БЭМ-методология
github.com/bem/bem-method
— Инструменты
github.com/bem/bem-tools

82. — БЭМ-методология
github.com/bem/bem-method
— Инструменты
github.com/bem/bem-tools
— Библиотека блоков
github.com/bem/bem-bl

83. — БЭМ-методология
github.com/bem/bem-method
— Инструменты
github.com/bem/bem-tools
— Библиотека блоков
github.com/bem/bem-bl
— Клуб для обсуждения
clubs.ya.ru/bem

84. Виталий Харисов
vitaly@yandex-team.ru
Сергей Бережной
veged@yandex-team.ru