
Привет, это «Кельник». Полгода назад мы начали рассказывать, как работаем со стилями на крупных проектах. Тогда речь шла о том, как контролировать отступы, если у сайта множество страниц, и над ними работает много людей. Сегодня поговорим о шрифтах — как сделать адаптив текстовых стилей на большом проекте и не сойти с ума.
Проблема 1: разнообразие текстовых стилей
В процессе работы над макетами дизайнер собирает гайдлайн по шрифтам. Минимально туда прописываются заголовки от h1 до h6, параграфы, списки, и т.д.
Обычно такой гайдлайн выглядит примерно так.
В чем тут проблема? Для параграфов дизайнер придумывает имена — bodyText, mainText, smallParagraph, factoidRedCenter, navigationLinks. Со временем количество таких стилей возрастает, следить за ними становится сложнее.
Бывает, что для очередного нового элемента придумывается стиль, который используется один раз на весь сайт, но занимает целую строку в гайде. Часто случается и наоборот: выбрав новый стиль для элемента, дизайнер не вносит его в гайд.
При таком подходе возрастает нагрузка на фронтов, которым нужно прописывать кучу стилей, придумывать новые названия для неопределенных. А когда сайт перейдет в поддержку, проблема усугубится — разбираться в десятках стилей затратно, добавить новые — просто и быстро.