Стратегия типографики
HTML-теги используются по умолчанию
Типографика должна быть самой простой и организованной системой в нашем проекте. Если мы используем единую систему типографики, то это облегчает работу с сайтом.
HTML теги типографики можно использовать для установки значений по умолчанию.
В идеальном мире нам никогда не пришлось бы назначать класс Заголовку или Текстовому элементу. Соблюдение типографики по умолчанию во всех случаях приведет к аккуратному и организованному проекту.
Однако часто при работе с брендовыми дизайнами мы часто сталкиваемся с различными вариациями типографики.
В таких случаях мы используем новый класс для создания стиля типографики отличающегося от стиля по умолчанию.
Например, глобальный служебный класс, такой как text-size-medium.
Мы применяем text-size-medium к текстовому элементу, потому что размер является вариацией от стандартного размера шрифта font-size.
Служебные классы для настройки типографики по умолчанию
Мы используем глобальные служебные стили типографики для объединения, организации и управления вариациями типографики.
Client-First поставляется с глобальной системой служебных классов с которой можно начать организацию типографики. Мы используем text- и heading- в качестве префиксов для наших служебных классов типографики.
Преимущества системы типографики Client-First
1. Глобальное управление
Глобально управляйте ключевыми CSS-свойствами, которые формируют вариации типографики. Мы можем глобально изменять типографику на всем сайте, изменив лишь одно значение.
2. Предотвращение создания лишних классов
Предотвращайте создание дублирующихся классов для повторно используемых стилей. Глобальные служебные классы сократят количество создаваемых уникальных пользовательских классов типографики. Например, text-color-brand.
Мы рекомендуем избегать создания нескольких пользовательских классов, которые управляют нашим текстом с color: blue.
3. Рабочий процесс, скорость и порядок
Мы можем искать и управлять классами типографики в панели стилей Designer, набрав префикс text- или heading-. Это позволяет нам быстро использовать классы типографики в нашем рабочем процессе.
Эта система префиксов помогает управлять типографикой на панели Styles и быстро находить классы в Folders. Мы можем организовать наши служебные классы типографики в специальной структуре папок.
Организация типографики позволяет нам работать быстрее и эффективнее внутри Designer.
Причины для настройки типографики по умолчанию
Вариации стиля
Самая распространенная причина.
Когда возникает необходимость изменить элемент типографики по умолчанию, мы можем использовать глобальный служебный класс.
Мы можем использовать один или несколько глобальных служебных классов для настройки элемента текста. Например, text-color-brand, text-weight-semibold.
Добавляя разные комбинации классов к элементу типографики, мы получаем множество вариантов стилизации текста.
Большинство наших Заголовков должно быть совсем без использования классов, если это возможно. Чем чаще мы используем стили по умолчанию, тем более унифицированной будет наша типографика.
Тег Заголовка для SEO не соответствует тегу Заголовка в дизайне
Например, нам нужно использовать тег H1 для заголовка страницы. H1 требуется для SEO и индексации страницы. Однако по дизайну стили этого заголовка должны соответствовать стилям H2 проекта.
У нас возникает конфликт, когда тег Заголовка, требуемый для SEO, нуждается в стилях по умолчанию от другого тега Заголовка.
Мы можем применить heading-style-h2 к элементу H1, чтобы имитировать стиль H2, сохраняя при этом тег H1 для SEO.
Классы heading-style-h# полезны для применения любого стиля Заголовка, при этом они сохраняют корректный SEO тег Заголовка.
Важно понимать, что heading-style-h# не изменяет тег HTML Заголовка элемента, он изменяет только стили CSS, применяемые к элементу.
Не стоит часто использовать классы heading-style-h#. Большинство наших Заголовков должны оставаться без класса и использовать стили по умолчанию. Стили Заголовков по умолчанию должны использоваться значительно чаще, чем вариации Заголовков.
Избегайте использования тега Заголовка
Мы советуем использовать теги Заголовка только для Заголовков. Если на странице есть текст, который не является Заголовком, но требует стиля Заголовка, не используйте для этого тег Заголовка.
Мы хотим сохранить теги H1 - H6 упорядоченными и использовать их правильно для SEO.
В этом примере выделена "Цена за месяц". Мы не советуем использовать тег Заголовка для этого случая, потому что это не Заголовок с релевантным содержанием. Однако нам нужны стили, аналогичные H1.
Вместо использования тега Заголовка для элементов, не являющихся Заголовками, мы можем использовать элемент Текст и пользовательский класс для его стилизации.
Настройка системы типографики
Официальный стартовый проект Client-First дает нам хорошую отправную точку. Однако, он не является окончательным набором стилей типографики для проекта.
С каждым новым проектом мы должны обновлять страницу руководства по стилю на основе стилей текущего проекта.
Создание новой системы служебных классов
После настройки всех классов типографики, которые поставляются вместе с Client-First, мы должны подумать о добавлении новых классов типографики в проект.
Мы можем создавать новые системы типографики внутри модели служебных классов.
Например, мы создаем сайт с разными значениями opacity, которые используем в рамках всего проекта. Для этого можем создать папку с классами opacity типографики.
- text-opacity-low
- text-opacity-medium
- text-opacity-high
- text-opacity-full
Вот так эти классы будут отображаться в Folders:
Мы можем создавать новые папки внутри папки Utility Classes для любого свойства CSS, которым мы хотим управлять глобально.
Создание нового служебного класса для предотвращения избыточного сложения классов
В Client-First мы всегда стараемся избегать избыточного сложения классов. Мы можем сложить несколько глобальных служебных классов, чтобы получить нужную нам настройку отображения текста.
Подробнее об избыточном сложении классов можно прочитать в Стратегии классов 2.
При избыточном сложении классов типографики у нас могут возникнуть трудности с изменением ранее добавленных классов в списке сложенных классов.
Если такое сочетание сложенных классов повторяется в нашем проекте, мы можем подумать о создании нового служебного класса, заменяющего собой группу сложенных классов.
Например, в примере выше можно объединить все стили в text-style-subtitle — или text-style-alternative — или любое другое название для описания использования этой комбинации стилей.
Мы можем использовать этот класс каждый раз, когда возникает избыточное сложения.
Мы сами выбираем название папки для таких стилизаций.
Мы можем использовать папку 'Style' для хранения этих сгруппированных стилей — text-style-alternative.
Мы также можем создать новую папку — text-custom-alternative.
Однако, надо понимать, что чем чаще мы используем такую стратегию, тем менее глобальной становится наша система типографики. В случае глобальных изменений свойств стиля текста нам придется предпринимать дополнительные шаги.
Например, если свойства text-size-large использовались для создания text-style-subtitle, и мы хотим обновить все text-size-large с 3rem на 4rem, нам нужно будет внести это изменение дважды — один раз для text-size-large и один раз для text-style-alternative.
Мы больше не наследуем text-size-large, когда сгруппировали наши сложенные классы для создания text-style-alternative.
Мы теряем универсальную глобальную систему типографики, если злоупотребляем стратегией сгруппированных стилей. Но если использовать ее разумно, это может помочь нам работать быстрее. Всегда принимайте обоснованные решения при создании новых служебных классов стратегии сгруппированных стилей.
Создание пользовательского класса
Система служебных классов подходит не всегда.
Причины использования пользовательского класса для текста:
- Настройка уникального и специфического текста
- Управление определенной группой текста
- Изменение адаптивных значений по умолчанию
"Создание пользовательского класса" не должно быть обычной практикой для проекта. В идеале большинство наших классов должны входить в систему служебных классов типографики.
Однако иногда пользовательский класс может быть лучшим решением. Ниже мы определяем три случая, когда пользовательский класс может быть идеальным.
Уникальный и специфический текст
Если у нас есть уникальный текст, который не вписывается в нашу систему служебных классов, мы можем создать пользовательский класс для применения стилей, необходимых для такого текста.
Например, footer_copyright-text. Текст авторских прав очень маленький, имеет особый серый цвет, написан заглавными буквами и имеет разные стили для разных разрешений. Это специфический элемент текста с уникальным сочетанием стилей.
Создание такого сочетания стилей возможно с помощью служебных классов с 4-5 сложенными классами. Мы никогда не стремимся любой ценой использовать систему служебных классов для каждого элемента текста.
Использование пользовательского класса оправданно для данного конкретного случая.
Управление определенной группой текстов
Одним изменением стиля мы можем обновить все экземпляры специфических групп текста.
Пример ссылки в футере
Например, footer_link. Ссылка в футере видна [9] раз в футере проекта. Применение этого класса к каждой из ссылок в футере позволяет нам управлять сразу всеми такими элементами.
Можно внести изменения только для одного элемента текста footer_link, и все элементы footer_link изменятся вместе с ним.
Возможность обновлять все экземпляры полезна для текста, у которого мы планируем изменять настройки на разных разрешениях.
Изменение значений по умолчанию для разных разрешений
Наша система служебных классов типографики идеальна для обеспечения единообразия типографики на всех разрешениях.
Если нам требуются настройки текста, не соответствующие значениям по умолчанию на разных разрешениях, пользовательский класс может помочь нам сделать такую настройку.
Например, H1 на странице соответствует обычным стилям H1 на десктопе и планшете. На мобильных устройствах текст H1 значительно уменьшается. H1 представляет собой длинную строку текста, и размер должен быть скорректирован для мобильных устройств. Мы можем использовать пользовательский класс для такой настройки на мобильных разрешениях. Например, faq-template_heading-text.