Павел Шут — БЭМ в lean startup'e
•
1 like•633 views
PandaDoc — веб-приложение на Angular.js, написанное командой из четырёх фронтенд-разработчиков. Lean startup по определению очень гибкий, и соответственно, вёрстка в нем часто меняется. В рассказе пойдёт речь о том, как в таких условиях мутировал БЭМ и как нужно было организовать вёрстку, чтобы обеспечить высокую реюзабельность стилей, простоту и скорость разработки.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Павел Шут — БЭМ в lean startup'e
Similar to Павел Шут — БЭМ в lean startup'e (20)
More from Yandex
More from Yandex (20)
Павел Шут — БЭМ в lean startup'e
- 1. БЭМ @ lean startup Павел Шут BEMup в Минске, 18 апреля 2014
- 2. Павел Шут Frontend Developer PandaDoc / Quote Roller Делаю веб с 2006 года sp.shut@gmail.com @spadarshut
- 3. Lean Startup • MVP • Эксперименты • Итерации 3
- 4. Что это значит для кода • Код часто изменяется • Часто добавляется новый код • Нужно удалять устаревший код 4
- 5. • В коде легко ориентироваться Идеальная верстка 5
- 6. • В коде легко ориентироваться Идеальная верстка 6
- 7. • Верстку можно смело менять не боясь что-то поломать Идеальная верстка 7
- 8. • Желательно, чтобы программисты могли верстать вместо меня Идеальная верстка 8
- 9. • Объем CSS не должен расти с каждой новой фичей Идеальная верстка 9
- 10. • Старый код не должен оставаться в проекте Идеальная верстка 10
- 11. • Писать меньше кода • Разбивать код на наименьшие реюзабельные части Как достичь идеала? 11
- 12. PandaDoc 12
- 13. • AngularJS REST Client • LESS (Bootstrap/LESS Hat) • Grunt/Bower PandaDoc под капотом 13
- 14. Компоненты 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/
- 15. CSS 15 • main.less • Grunt • Блоки и модификаторы в одном файле
- 16. CSS 16 + меньше файлов + легче найти нужный код - лишний код в новых проектах
- 17. BEM HTML 17 + методология
- 18. BEM HTML 18 + методология + модульность
- 19. BEM HTML 19 + методология + модульность + реюзабельность
- 20. BEM HTML 20 + методология + модульность + реюзабельность + масштабируемось
- 21. BEM HTML 21 - длинные классы
- 22. BEM HTML 22 - длинные классы - растет количество блоков/файлов в проекте
- 23. BEM HTML 23 - длинные классы - растет количество блоков/файлов в проекте - не все есть блоком/ элементом
- 24. • HTML классы все называют CSS-классами Семантика и UI 24
- 25. • Нужна семантика? Tags, Microformats, Microdata, RDFa, WAI- ARIA Семантика и UI 25
- 26. • «Семантичные» классы бессмысленны в своем контексте Семантика и UI 26
- 27. 27 Фреймворки уже делают это .grid .form-‐control .btn .icon .dialog
- 28. 28 .m, .m-‐-‐sm/lg .m-‐-‐top/left/bottom/right/horis/vert .m-‐-‐{pos}-‐sm/-‐lg Размеры и отступы
- 29. 29 .w1, .w33, .w100, .maxw100 .h100, .inline-‐block .pos-‐-‐rel, .pos-‐-‐abs Размеры, отступы и т.п.
- 30. 30 .a-‐-‐center/left/right .t-‐-‐sm/md/lg/xl/xxxl .ellipsis Текст
- 32. • Простые селекторы Как это склеить 32
- 33. • Минимум каскада (.list > li) Как это склеить 33
- 34. • Классов много не бывает Как это склеить 34
- 35. • Минимум миксинов и экстендов Как это склеить 35
- 36. • Легко править код — подставить класс Бонусы 36
- 37. • CSS не растет пропорционально росту проекта (extra high reuse!) Бонусы 37
- 38. • Нет каскада — нечему ломаться Бонусы 38
- 39. Дзякую за ўвагу! 39 h-p://bit.ly/bemup-‐minsk-‐feedback
- 40. Павел Шут PandaDoc / Quote Roller @spadarshut 40