Доклад о развитии CSS-методологии, Константин Дзюин (Badoo) Теоретические и практические аспекты разработки HTML/CSS

1. Методология:
БЭМ, Модули, Отношения
Константин Дзюин
13 октября 2016 года
Москва, Badoo

2. Привет!
Константин Дзюин
Мобильный Веб Разработчик (html/css)
Badoo, Лондон, Великобритания
html/css разработчик - 14 лет
Badoo - 3 года
Twitter: @kdzuin

3. Методоло́гия — учение о методах, способах
и стратегиях исследования предмета.
Практическая методология направлена на
решение практических проблем и
целенаправленное преобразование мира.
— Wikipedia

4. Новые технологии
• Постоянно трансформируют методологию разработки
• легко, весело и интересно
• некоторые вещи упрощаются
• Легко применять для проектов с чистого листа
• А что в реальной жизни?

5. Desktop Web
> 4M активных пользователей в день
> 400 продуктовых задач за год
+недавно перешли на
client-side rendering, strict api
= 8 разработчиков
> 10 лет кодовой базе

6. Mobile Web
> 2M активных пользователей в день
> 250 продуктовых задач за год
+ full redesign & restyling
= 10 разработчиков
> 5 лет кодовой базе

7. Мобильный веб 2012 – 2015
• java/javascript/html/css разработчики
• отсутствие единой методологии html/css
• высокая цена поддержки и масштабирование
HTML5
WAP
Java -> HTML

8. Мобильный веб – 09/2015
точка “пересборки”
• специальзация
html/css разработчики
• формирование единой html/css методологии
• снижение цены поддержки и масштабирования

9. Будущее
• Специализация: html/css разработчики
• Единая методология
• Код шаринг
• библиотека компонент
• styleguide
• Гибкость
Desktop
Web
Mobile
Web

10. Эволюция

11. <div class="list">
<div class="item">
<div class="userpic">
<div class="img"></div>
</div>
<div class="message">
</div>
</div>
</div>
.list {}
.item {}
.userpic {}
.message {}
“Колхоз”

12. var el = $.satisfy('div.list');
data.forEach(i = > {
$.satisfy(
'div.item div.message[innerHTML=“' + i + ‘“"]'
).appendTo(el);
});
.list {
.item {
.userpic {}
&-message {}
}
}
JS “головного мозга”

13. Модульность

14. Безопасность

15. Безопасность

16. Из грязи
в князи BEM

17. БЭМ
.block
.block__element
.block--modifier

18. БЭМ: Блоки

19. БЭМ: Элементы

20. БЭМ: Модификаторы

21. On Air
CodePen time

22. <div class="contact-list">
<div class="contact-item">
<div class="userpic"></div>
<div class="contact-item__message">
Lorem ipsum dolor sit amet.
</div>
</div>
</div>
.contact-list {}
.contact-item {}
.contact-item .userpic {}
.contact-item__message {}
Наши дни

23. Desktop
Web
Mobile
Web
БЭМ

24. • случайные коллизии имён
• введение нового разработчика
• многабукаф
• BEM в Badoo – name convention, а не BEM Components
БЭМ: минусы

25. CSS Модули
и влияние
на методологию

26. • Изоляция CSS-кода модуля
• случайные конфликты имен
• Безопасное переиспользование
• Безопасная разработка нового
• Синтаксический сахар
CSS модули - плюсы

27. On Air
CodePen time

28. <div class="contact-list">
<div class="contact-item">
<div class="userpic"></div>
<div class="contact-item__message">
Lorem ipsum dolor sit amet.
</div>
</div>
</div>
.contact-list {}
.contact-item {}
.contact-item .userpic {}
.contact-item__message {}
CSS Модули

29. • Ноооо, хотим из компонента А повлиять на Б
• Цена перехода?
CSS модули - минусы

30. Композиция

31. Компози́ция — составление целого из
частей; организующий компонент
художественной формы, придающий
произведению единство и цельность,
соподчиняющий его элементы друг другу и
всему замыслу художника.
— Wikipedia

32. • У всех по пять, почему бы и нет?
• У всех по пять, родитель сбросит
• У всех по пять, но не у последнего
• Между соседними по пять
Отношения компонент

33. • Атом – Молекула – Организм
• Кирпич – Стена – Дом
• Компонент – Компонент – Компонент
• Компонент – Композиция – Композиция композиций
Как называть?

34. Немного схем

35. • Компонент нейтрален вне системы
• Отношения определяются в системе
Отношения компонент

36. On Air
CodePen time

37. Итого:
1. БЭМ? Модули? - что удобно
2. Компоненты: железные и резиновые
3. Композиция: отношения компонент

38. Прекрасное далёко
Использования нейтральных
элементов – путь к подвижной
системе
Среднее время жизни кода
позволяет методологии быть
подвижной и адаптироваться
Как мы можем улучшить систему?
Легко!

39. Вопросы?

40. The original, largest and leading
dating network

41. Спасибо!