More Related Content Similar to Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса" (20) Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"1. Как использовать БЭМ!
вне Яндекса
Варвара Степанова
разработчик интерфейсов
#БЭМ
Я.Субботник, Челябинск, 25 февраля 2012 года
12. Как использовать БЭМ!
вне Яндекса
Варвара Степанова
разработчик интерфейсов
#БЭМ
Я.Субботник, Челябинск, 25 февраля 2012 года
21. HTML код элементов
<div class=”search”>
<input class=”search__input” .../>
<span class=”search__button”>
...
</span>
</div>
21
50. Файловая структура блока
search/
_bg/
search_bg_red.css
__input/
search__input.css
search__input.ie.css
search.css
42
54. bem create
> bem create block search
> bem create elem -b search input
44
55. bem create
> bem create block search
> bem create elem -b search input
> bem create mod -b search size -v big
44
56. bem create
> bem create block search
> bem create elem -b search input
> bem create mod -b search size -v big
> bem create --help
44
58. > bem create -T css ...
.search {
}
.search__input {
}
.search_bg_red {
}
46
74. bem build
> bem build
-T css
-l blocks -d page.bemdecl.js
57
75. bem build
> bem build
-T css
-l blocks -d page.bemdecl.js
-o pages/index -n index
57
76. bem build
> bem build
-T css
-l blocks -d page.bemdecl.js
-o pages/index -n index
> ls pages/index
57
77. bem build
> bem build
-T css
-l blocks -d page.bemdecl.js
-o pages/index -n index
> ls pages/index
index.bemdecl.js index.css
57
79. bem build
> bem build
-T ie.css
-l blocks -d page.bemdecl.js
-o pages/index -n index
58
80. bem build
> bem build
-T ie.css
-l blocks -d page.bemdecl.js
-o pages/index -n index
> ls pages/index
58
81. bem build
> bem build
-T ie.css
-l blocks -d page.bemdecl.js
-o pages/index -n index
> ls pages/index
index.bemdecl.js index.css index.ie.css
58
97. Утилиты
сБорщик
https://github.com/veged/borschik
CSSO
https://github.com/afelix/csso
68
98. Утилиты
сБорщик
https://github.com/veged/borschik
CSSO
https://github.com/afelix/csso
Сеточка
https://github.com/afelix/setochka
68
103. index.css
@import url(blocks/i-reset/i-reset.css);
@import url(blocks/b-page/b-page.css);
@import url(blocks/b-description/b-description.css);
@import url(blocks/b-link/b-link.css);
@import url(blocks/b-page-title/b-page-title.css);
@import url(blocks/b-blocks-list/b-blocks-list.css);
@import url(blocks/b-blocks-desc/b-blocks-desc.css);
@import url(blocks/b-text/b-text.css);
@import url(blocks/i-desc/_type/i-desc_type_mod.css);
@import url(blocks/i-desc/_type/i-desc_type_elem.css);
72
113. search.haml
- DECL :search do |content|
%form.search
= DO content
- DECL :search__input
%input.search__input
- DECL :search__button do |content|
%button.search__button
= DO content
82
114. index.haml
- DECL :search do |content|
- DO :search__input
- DO :search__button
Найти
83
146. bem build
> bem build
-T js
-l blocks -d page.bemdecl.js
-o pages/index -n index
102
147. bem build
> bem build
-T js
-l blocks -d page.bemdecl.js
-o pages/index -n index
> ls pages/index
102
148. bem build
> bem build
-T js
-l blocks -d page.bemdecl.js
-o pages/index -n index
> ls pages/index
index.bemdecl.js ... index.js
102