Документирование вёрстки по-взрослому

Документирование вёрстки
по-взрослому

Роберт Харитонов

Боль

Боль

Боль

Рутина

Повторная вёрстка

Лишняя работа
Плохое качество
Рутина!

Backend-разработчики

Качество клиентского кода

Я тут немного поправил...
.class .class .class ... { }
!important

Дизайнеры

Вечный редизайн

А где ховер стейт?
Градиентик не такой
Шрифт побольше

Команда

Проблемы взаимодействия

Единый стиль
Обмен кодом
Коммуникация

Что делать?

Программы и сервисы решаюшие перечисленные проблемы

Source

Решает проблемы с

Разработкой верстки
Поддержкой и документированием библиотеки блоков
Разработкой интерфейсов в команде

Открыто!

github.com/sourcejs

Документация

Документация

Для

Продукта
Верстальщиков
Команды (дизайнеры, программисты...)

Масштаб

6 верстальщиков, 9 UI дизайнеров, ≈50 разработчиков
35 модулей в 1 слое по rhr.me/MCSS
54 модулея в 2 слое + смежные

≈650 кб
сжатого CSS

Проблемы

Для верстальщиков

Обмен кодом
Поддержка чужого кода
Велосипеды

Хаос

Решение

Определить методологию и стиль кода
Собирать библиотеку блоков
Максимально документировать вёрстку

Документация в CSS

		.cb { /* complex block */
		    overflow: hidden;  /* have floats inside */
		    position: relative;  /* have p:abs inside */
		    width: 100%;
		    /* .cb-head height + .cf-footer / 20 + 17 */
		    min-height: 37px;
		}

Документация в CSS

		.cb { /* complex block */
		    overflow: hidden;  /* have floats inside */
		    position: relative;  /* have p:abs inside */
		    width: 100%;
		    /* .cb-head height + .cf-footer / 20 + 17 */
		    min-height: 37px;
		}