Павел Шут — БЭМ в lean startup'e
-
Upload
yandex -
Category
Technology
-
view
307 -
download
0
description
Transcript of Павел Шут — БЭМ в lean startup'e
![Page 1: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/1.jpg)
БЭМ @ lean startup
Павел Шут BEMup в Минске, 18 апреля 2014
![Page 2: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/2.jpg)
Павел Шут Frontend Developer PandaDoc / Quote Roller
Делаю веб с 2006 года [email protected]
@spadarshut
![Page 3: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/3.jpg)
Lean Startup
• MVP • Эксперименты • Итерации
3
![Page 4: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/4.jpg)
Что это значит для кода
• Код часто изменяется • Часто добавляется новый код • Нужно удалять устаревший код
4
![Page 5: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/5.jpg)
• В коде легко ориентироваться
Идеальная верстка
5
![Page 6: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/6.jpg)
• В коде легко ориентироваться
Идеальная верстка
6
![Page 7: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/7.jpg)
• Верстку можно смело менять не боясь что-то поломать
Идеальная верстка
7
![Page 8: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/8.jpg)
• Желательно, чтобы программисты могли верстать вместо меня
Идеальная верстка
8
![Page 9: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/9.jpg)
• Объем CSS не должен расти с каждой новой фичей
Идеальная верстка
9
![Page 10: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/10.jpg)
• Старый код не должен оставаться в проекте
Идеальная верстка
10
![Page 11: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/11.jpg)
• Писать меньше кода • Разбивать код на наименьшие реюзабельные части
Как достичь идеала?
11
![Page 12: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/12.jpg)
PandaDoc
12
![Page 13: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/13.jpg)
• AngularJS REST Client • LESS (Bootstrap/LESS Hat) • Grunt/Bower
PandaDoc под капотом
13
![Page 14: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/14.jpg)
Компоненты
14
• styles/ • global/
• base.less • mixins.less • vars.less
• lib/ • bootstrap/ • lessshat.less
• objects/ • breadcrumbs.less • dialog.less • document.less • forms.less • layout.less • …
• pages/
![Page 15: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/15.jpg)
CSS
15
• main.less • Grunt • Блоки и модификаторы в одном файле
![Page 16: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/16.jpg)
CSS
16
+ меньше файлов + легче найти нужный код - лишний код в новых проектах
![Page 17: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/17.jpg)
BEM HTML
17
+ методология
![Page 18: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/18.jpg)
BEM HTML
18
+ методология + модульность
![Page 19: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/19.jpg)
BEM HTML
19
+ методология + модульность + реюзабельность
![Page 20: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/20.jpg)
BEM HTML
20
+ методология + модульность + реюзабельность + масштабируемось
![Page 21: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/21.jpg)
BEM HTML
21
- длинные классы
![Page 22: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/22.jpg)
BEM HTML
22
- длинные классы - растет количество блоков/файлов в проекте
![Page 23: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/23.jpg)
BEM HTML
23
- длинные классы - растет количество блоков/файлов в проекте
- не все есть блоком/элементом
![Page 24: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/24.jpg)
• HTML классы все называют CSS-классами
Семантика и UI
24
![Page 25: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/25.jpg)
• Нужна семантика? Tags, Microformats, Microdata, RDFa, WAI-ARIA
Семантика и UI
25
![Page 26: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/26.jpg)
• «Семантичные» классы бессмысленны в своем контексте
Семантика и UI
26
![Page 27: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/27.jpg)
27
Фреймворки уже делают это
.grid
.form-‐control
.btn
.icon
.dialog
![Page 28: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/28.jpg)
28
.m, .m-‐-‐sm/lg
.m-‐-‐top/left/bottom/right/horis/vert
.m-‐-‐{pos}-‐sm/-‐lg
Размеры и отступы
![Page 29: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/29.jpg)
29
.w1, .w33, .w100, .maxw100
.h100,
.inline-‐block
.pos-‐-‐rel, .pos-‐-‐abs
Размеры, отступы и т.п.
![Page 30: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/30.jpg)
30
.a-‐-‐center/left/right
.t-‐-‐sm/md/lg/xl/xxxl
.ellipsis
Текст
![Page 31: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/31.jpg)
31
.сolor-‐-‐brand/dimmed/white
.bg-‐-‐white/light/dark
Цвет
![Page 32: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/32.jpg)
• Простые селекторы
Как это склеить
32
![Page 33: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/33.jpg)
• Минимум каскада (.list > li)
Как это склеить
33
![Page 34: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/34.jpg)
• Классов много не бывает
Как это склеить
34
![Page 35: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/35.jpg)
• Минимум миксинов и экстендов
Как это склеить
35
![Page 36: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/36.jpg)
• Легко править код — подставить класс
Бонусы
36
![Page 37: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/37.jpg)
• CSS не растет пропорционально росту проекта (extra high reuse!)
Бонусы
37
![Page 38: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/38.jpg)
• Нет каскада — нечему ломаться
Бонусы
38
![Page 39: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/39.jpg)
Дзякую за ўвагу!
39
h-p://bit.ly/bemup-‐minsk-‐feedback
![Page 40: Павел Шут — БЭМ в lean startup'e](https://reader033.fdocuments.us/reader033/viewer/2022052504/549bd8acb47959cf318b45a6/html5/thumbnails/40.jpg)
Павел Шут PandaDoc / Quote Roller
@spadarshut
40