Upload
yandex
View
307
Download
0
Embed Size (px)
DESCRIPTION
PandaDoc — веб-приложение на Angular.js, написанное командой из четырёх фронтенд-разработчиков. Lean startup по определению очень гибкий, и соответственно, вёрстка в нем часто меняется. В рассказе пойдёт речь о том, как в таких условиях мутировал БЭМ и как нужно было организовать вёрстку, чтобы обеспечить высокую реюзабельность стилей, простоту и скорость разработки.
Citation preview
БЭМ @ lean startup
Павел Шут BEMup в Минске, 18 апреля 2014
Павел Шут Frontend Developer PandaDoc / Quote Roller
Делаю веб с 2006 года [email protected]
@spadarshut
Lean Startup
• MVP • Эксперименты • Итерации
3
Что это значит для кода
• Код часто изменяется • Часто добавляется новый код • Нужно удалять устаревший код
4
• В коде легко ориентироваться
Идеальная верстка
5
• В коде легко ориентироваться
Идеальная верстка
6
• Верстку можно смело менять не боясь что-то поломать
Идеальная верстка
7
• Желательно, чтобы программисты могли верстать вместо меня
Идеальная верстка
8
• Объем CSS не должен расти с каждой новой фичей
Идеальная верстка
9
• Старый код не должен оставаться в проекте
Идеальная верстка
10
• Писать меньше кода • Разбивать код на наименьшие реюзабельные части
Как достичь идеала?
11
PandaDoc
12
• AngularJS REST Client • LESS (Bootstrap/LESS Hat) • Grunt/Bower
PandaDoc под капотом
13
Компоненты
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/
CSS
15
• main.less • Grunt • Блоки и модификаторы в одном файле
CSS
16
+ меньше файлов + легче найти нужный код - лишний код в новых проектах
BEM HTML
17
+ методология
BEM HTML
18
+ методология + модульность
BEM HTML
19
+ методология + модульность + реюзабельность
BEM HTML
20
+ методология + модульность + реюзабельность + масштабируемось
BEM HTML
21
- длинные классы
BEM HTML
22
- длинные классы - растет количество блоков/файлов в проекте
BEM HTML
23
- длинные классы - растет количество блоков/файлов в проекте
- не все есть блоком/элементом
• HTML классы все называют CSS-классами
Семантика и UI
24
• Нужна семантика? Tags, Microformats, Microdata, RDFa, WAI-ARIA
Семантика и UI
25
• «Семантичные» классы бессмысленны в своем контексте
Семантика и UI
26
27
Фреймворки уже делают это
.grid
.form-‐control
.btn
.icon
.dialog
28
.m, .m-‐-‐sm/lg
.m-‐-‐top/left/bottom/right/horis/vert
.m-‐-‐{pos}-‐sm/-‐lg
Размеры и отступы
29
.w1, .w33, .w100, .maxw100
.h100,
.inline-‐block
.pos-‐-‐rel, .pos-‐-‐abs
Размеры, отступы и т.п.
30
.a-‐-‐center/left/right
.t-‐-‐sm/md/lg/xl/xxxl
.ellipsis
Текст
31
.сolor-‐-‐brand/dimmed/white
.bg-‐-‐white/light/dark
Цвет
• Простые селекторы
Как это склеить
32
• Минимум каскада (.list > li)
Как это склеить
33
• Классов много не бывает
Как это склеить
34
• Минимум миксинов и экстендов
Как это склеить
35
• Легко править код — подставить класс
Бонусы
36
• CSS не растет пропорционально росту проекта (extra high reuse!)
Бонусы
37
• Нет каскада — нечему ломаться
Бонусы
38
Дзякую за ўвагу!
39
h-p://bit.ly/bemup-‐minsk-‐feedback
Павел Шут PandaDoc / Quote Roller
@spadarshut
40