БЭМ @ lean startup

Павел Шут BEMup в Минске, 18 апреля 2014

Павел Шут Frontend Developer PandaDoc / Quote Roller

Делаю веб с 2006 года sp.shut@gmail.com

@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