Стратегия отступов

Стратегия работы с отступами

В этом разделе объясняется, как применять все методы работы с отступами, рекомендуемые системой Client-First.

Мы разделили эту страницу документации на две части:

1. Часть 1: Служебные классы
2. Часть 2: Пользовательские классы

Часть 1: Служебные классы

Часть 1 Стратегии отступов Client-First посвящена глобальным служебным классам. Мы предлагаем несколько стратегий использования служебных классов внутри проекта.

Разные проекты, варианты использования и реализации могут требовать приоритета одной стратегии над другой. Наличие нескольких стратегий отступов с использованием служебных классов дает нам гибкость при создании проектов.

Система отступов на базе служебных классов Client-First предлагает следующие варианты реализации:

1. Стратегия блоков отступов (Spacing block strategy): Вариант 1 (классы spacer-) или Вариант 2 (классы padding-).
2. Стратегия оберток отступов (Spacing wrapper strategy): (классы margin- / padding-).

Эти системы служебных классов включены в состав глобальных служебных классов Client-First.

Стратегия блока отступа

Способ 1:

Способ 1:

В Client-First блок отступа - это пустой Div-блок со служебным классом, который создает пространство между двумя соседними элементами.

Блоки отступов можно использовать для создания вертикального пространства между любыми элементами.

Вариант 1 или 2?

Система spacer- аналогична системе padding-bottom + padding-[size], и обе они приводят к одному и тому же результату.

Client-First дает вам возможность выбрать, какой метод реализации лучше всего подходит для вашего рабочего процесса.

Основное различие заключается в том, что классы spacer- используют один класс, в то время как классы на базе padding- используют два класса.

При реализации с двумя классами мы применяем класс padding-bottom (направление), а затем в дополнение к нему добавляем класс padding-medium (размер). Вместе эти два класса применяют к элементу padding-bottom: 2rem.

Решение об использовании того или иного метода остается за вами как за разработчиком.

Одним из преимуществ системы классов spacer- является возможность добавления адаптивных вариантов. Это объясняется далее на этой странице.

Стратегия обертки отступа

и

В Client-First "обертка отступа" (spacing wrapper) — это Div-блок со служебными классами отступа, внутри которого находится контентный элемент.

Мы добавляем Div блок на страницу и применяем класс margin-bottom (направление), а затем добавляем к нему класс margin-medium (размер). Вместе эти два класса применяют свойство margin-bottom: 2rem к элементу.

Мы вкладываем элемент внутрь обертки отступа (spacing wrapper), чтобы создать пространство между вложенным элементом и чем-то еще.

Варианты использования: Применение служебных отступов

1. Использование глобальных значений отступов по умолчанию

В Client-First "обертка отступа" (spacing wrapper) — это Div-блок со служебными классами отступа, внутри которого находится контентный элемент.

Мы хотим унифицировать отступы нашего сайта во всех разделах и страницах. Например, если мы используем значения отступов 4rem, 8rem, 12rem в проекте, мы хотим, чтобы эти значения были согласованными везде.

Чем чаще мы используем систему служебных классов отступов Client-First, тем более согласованными будут наши отступы в проекте.

С помощью блоков отступов или оберток отступов мы автоматически вносим единые корректировки в отступы для всех разрешений.

Если мы применяем блоки и обертки отступов к 100 элементам в проекте, это значит, что нам надо будет скорректировать на 100 стилей меньше для мобильных разрешений.

Для каждого разрешения элементы с блоками и обертками отступов получат значения отступов по умолчанию, которые мы используем во всем  проекте.

Мы можем обновить множество значений отступов в проекте с помощью одного изменения значения свойства CSS. Обновление влияет на каждый элемент, который использует блок или обертку для создания отступов. Например, если клиент говорит: "Я хочу уменьшить отступы между всеми блоками контента", это обновление может быть выполнено относительно быстро путем корректировки глобальных значений служебных классов отступов.

2. Преимущества для рабочего процесса и масштабируемости

Мы хотим сократить количество пользовательских классов, создаваемых специально для отступов. Блоки и обертки отступов могут помочь нам создать меньше классов для нашего проекта.

Мы можем полагаться на уже созданные служебные классы для отступов. Чем больше мы используем систему служебных классов отступов, тем меньше нам придется создавать пользовательских классов отступов.

Client-First против избыточного сложения классов в проектах Webflow. Мы хотим избегать избыточного сложения в любой ситуации. Обертки и блоки отступов помогают нам избегать избыточного сложения классов на наших элементах. Узнайте больше об избыточном сложении классов в Стратегии классов 2.

Блоки и обертки для создания отступов в Client-First созданы для того, чтобы помочь нам работать быстрее и легче поддерживать наш проект.

Если мы используем обертки и блоки отступов, но это приводит к замедлению рабочего процесса или затруднению управления проектом, возможно, мы неправильно используем обертки (блоки) для создания отступов.

Применение свойств CSS margin и padding непосредственно к пользовательским классам допустимо. Существуют случаи, когда эффективнее применять отступы на пользовательский класс. Мы обсуждаем использование пользовательских классов во второй части этой статьи.

3. Отступы для типографики и кнопок

В этом примере у нас есть H3, Paragraph и Button. Мы можем создать отступы для этих элементов без создания нового класса.

Мы используем блоки или обертки для создания отступов между всеми текстовыми элементами, что помогает нам избежать создания пользовательских классов.

Наша Стратегия типографики предполагает использование малого количества или полное отсутствие пользовательских классов на наших элементах типографики. Мы хотим избегать создания новых пользовательских классов для управления отступами элементов типографики.

Вместо этого мы можем сочетать нашу глобальную стратегию типографики с нашей глобальной стратегией отступов для использования текстовых элементов без пользовательских классов.

В Client-First мы хотим сохранить наши заголовки и абзацы шрифтов свободными от не-типографических классов.

В идеале на наших элементах типографики совсем не применяются классы. Использование стилей тегов по умолчанию - это лучший вариант. Если типографика имеет отличия от значения по умолчанию, мы можем поместить на такие элементы классы text- или heading-.

Мы хотим избегать применения классов margin- или padding-непосредственно к текстовым элементам. Ведь мы быстро столкнемся с проблемой избыточного сложения, если будем применять классы типографики и отступов к текстовым элементам.

Блоки и обертки для создания отступов помогают нам избегать избыточного сложения.

Мы не хотим делать так:

Блок для создания отступа уменьшает количество классов отступов на текстовом элементе.

С классами отступов, отделенными от классов типографики, мы можем управлять каждым из них отдельно без проблемы избыточного сложения.

4. Отступы для повторно используемых элементов (symbols) и компонентов (components)

Когда мы хотим применить отступы к повторно используемым элементам, такие же отступы будут применены ко всем экземплярам.

Одинаковые отступы для повторно используемых элементов могут быть проблемой, если разные экземпляры этих элементов требуют разных значений отступов.

Используя блоки или обертки для создания отступов, мы можем создавать разные отступы для разных экземпляров повторно используемых элементов.

Не требуется сложение классов, не создаются новые классы, не нужен пользовательский CSS. Наша система отступов позволяет создавать специфические отступы для повторно используемых элементов, используя основной контент.

Варианты использования: Стратегия блоков отступов

1. Создание пространства между двумя элементами

Блоки для создания отступов очень полезны при создании пространства между двумя элементами. Их быстро создавать, они имеют меньше вложенных уровней, и расположение элементов становится более наглядным.

2. Просмотр дочерних элементов в Navigator

Используя блоки для создания отступов, мы создаем понятный вид в Navigator. Мы видим все элементы компонента.

Использование слишком большого количества оберток отступов может "спрятать" слишком много наших важных элементов во вложенных папках. Блоки отступов создадут меньше вложенности внутри Navigator.

Блоки отступов более наглядно отображают элементы проекта в Navigator.

3 . Уникальные отступы для верхней и нижней части секций

Когда у секции padding-top и padding-bottom должны быть разные, и мы хотим сохранить глобальную систему служебных классов, мы можем использовать блоки для создания отступов.

Мы можем добавить блок отступа с классом padding-large к верхней части раздела и блок отступа с классом padding-small к нижней части раздела.

Варианты использования: Стратегия оберток отступов

1. Использование стратегии отступов CSS Grid

Используя Стратегию отступов CSS Grid, мы можем быстро создавать равные пространства между дочерними элементами.

Мы можем использовать обертки отступов, чтобы создать уникальные отступы для конкретного элемента в списке. Когда обертки отступов используются вместе со стратегией CSS Grid, мы можем быстрее и легче создавать пользовательские отступы.

Например, контент имеет отступы 1rem между всеми дочерними элементами, кроме последнего.

Мы можем применить margin-top margin-small в качестве обертки отступов для последнего элемента в списке.

Обертки для создания отступов позволяют нам использовать отступы CSS Grid без создания нескольких пользовательских классов.

Часто задаваемые вопросы - Вредны ли пустые div для моего сайта?

Нас часто спрашивают о влиянии пустых div и div, используемых только для отступов, в системе Client-First.

• Будут ли поисковые системы испытывать трудности при сканировании моего сайта?
• Не создам ли я слишком много элементов на странице?
• Возможны ли проблемы с веб-доступностью?
• Будет ли мой проект сложнее поддерживать?

Короткий ответ — нет.

Пока пустые div не содержат контента или атрибутов доступности (например, aria-label), скринридеры их проигнорируют.

Поисковые системы также не будут обращать внимание на пустые div. Пустой div с CSS-классом легко распознается как людьми, так и поисковыми системами.

"Чрезмерный размер DOM» (Excessive DOM size) — это распространенное предупреждение об ошибке, которое встречается во многих инструментах анализа производительности веб-сайтов. Например, в PageSpeed Insights от Google. Крайне маловероятно, что система отступов Client-First является причиной этой ошибки. Наиболее вероятными причинами являются многослойные анимации, файлы Lottie и встраиваемый сторонний код. Эти реализации могут генерировать на порядок больше DOM-элементов, чем система отступов Client-First.
‍
Веб-страница, созданная с использованием рекомендаций Client-First, практически не влияет на появление ошибки "Чрезмерный размер DOM".

Хотите узнать больше о пустых div? Мы с удовольствием рекомендуем статью "Не бойтесь пустых Div" (Don't Fear Empty Divs) от Кори Этцкорна (Cory Etzkorn).

Часть 2: Пользовательские классы

Служебные классы отступов Client-First - не единственный метод реализации отступов на нашем сайте.

Мы можем применить свойства CSS margin и padding напрямую к пользовательскому классу.

В рамках подхода с использованием пользовательских классов предлагаем 2 стратегии создания отступов:

1. Пользовательский класс на элементе
2. Отступы с помощью родительского CSS Grid

Когда мы используем пользовательские классы для отступов, мы должны точно осознавать, зачем мы это делаем. Меньшее количество пользовательских классов в проекте означает большую консистентность отступов.

Стратегия пользовательского класса на элементе

"Пользовательский класс на элементе" применяет значения margin и padding непосредственно к элементу, который должен получить отступ.

Например, мы применяем faq_title к заголовку, которому требуется уникальный отступ, но мы не можем получить такой отступ с помощью системы служебных классов. В этом случае, свойство CSS margin-bottom: 0.75rem применяется непосредственно к классу faq_title.

Здесь применяется пользовательский класс и пользовательский отступ на самом элементе.

Эта стратегия является наиболее гибкой. У нас есть полный контроль над конкретным элементом на всех разрешениях. Однако, мы должны использовать эту возможность с осторожностью.

Злоупотребляя этой стратегией, мы можем создать слишком много пользовательских классов для отступов. Это может привести к хаотичной системе отступов в проекте и потребует большое количество ручных обновлений при работе с разными разрешениями.

Стратегия CSS Grid

Используя стратегию отступов CSS Grid, мы применяем CSS Grid к родительскому контейнеру, который создает отступы между дочерними элементами внутри него.

Мы можем создать вертикальные и горизонтальные отступы между дочерними элементами с помощью CSS grid.

Вместо того, чтобы создавать множество блоков, оберток или пользовательских классов для элементов списка, мы можем использовать стратегию CSS Grid для управления всеми дочерними элементами с помощью одного модификатора - родительского контейнера.

Варианты использования: Пользовательский класс на элементе

1. Глобальное управление отступами конкретного элемента

Ключевые слова здесь - "конкретного элемента".

Использование глобальных оберток отступов для повторяющихся элементов может замедлить нашу работу и усложнить управление проектом.

Мы можем задать себе два важных вопроса, чтобы понять, следует ли использовать служебные классы или пользовательский класс при создании отступов для конкретного элемента.

Если в проекте много экземпляров этого конкретного элемента, элемент является повторяющимся элементом в проекте. Мы можем управлять всеми экземплярами одновременно, используя пользовательский класс.

Например, если в проекте есть 25 экземпляров элемента, мы можем использовать один пользовательский класс для управления всеми 25 экземплярами.

Если мы хотим вносить одинаковые изменения в каждый экземпляр [этого повторяющегося элемента], пользовательский класс поможет нам управлять всеми экземплярами одновременно и применять изменения глобально.

Пример с пользовательским классом на поле ввода

Рассмотрим пример использования поля ввода для формы в нашем проекте. Такие поля ввода используются на 4 страницах проекта.

Настройка ниже показывает, что каждое поле form_input разделено блоком для создания отступа. Эта стратегия используется во всем проекте.

Если мы хотим уменьшить отступ между каждым form_input, нам нужно будет обновить каждый блок для создания отступа по отдельности.

Пример выше не идеален, так как изменение может потребовать лишних усилий для обновления каждой формы в проекте. Мы будем должны перебрать все поля ввода, чтобы обновить настройку блока отступа.

Изменение всех полей ввода формы на всем проекте может занять несколько секунд и потребовать минимальных усилий при правильной настройке.

Пользовательский класс на form_input позволит нам управлять всеми элементами form_input одновременно.

На этом скриншоте к каждому form_input применяется margin-bottom: 1rem.

Если мы хотим изменить отступы между всеми полями ввода, достаточно сделать одно изменение в классе form_input. Изменение этого отступа изменит значение для всех полей ввода на всем проекте.

Этот пример идеален, если мы хотим, чтобы все поля ввода формы на проекте имели единое значение margin-bottom: 1rem.

Мы имеем полный глобальный контроль над отступами этого элемента. Мы можем изменить каждое поле ввода на этой странице и на всем проекте одним изменением свойства CSS margin-bottom для form_input.

2. Уникальные размеры отступов для планшета и мобильных устройств

Блоки и обертки для создания отступов обладают мощным преимуществом поддержания стандартных отступов на всех разрешениях. Однако нам может потребоваться изменение значений отступов на разных разрешениях.

Иногда у нас есть элементы, которым требуется задать уникальные отступы на планшете, мобильных устройствах или на нескольких разрешениях. В этом случае, блоки и обертки для создания отступов могут затруднить настройку.

Служебные классы в Client-First предназначены для унификации отступов и не позволяют изменять настройки для разных разрешений.

Мы можем применить отступы непосредственно к пользовательскому классу, если нам нужны настройки отступов на разных разрешениях. Пользовательский класс позволит нам управлять отступами отдельно для каждого разрешения.

3. Однократно используемые отступы

Иногда у нас есть элемент, которому нужен уникальный отступ. Он не является частью группы других элементов и не имеет специальных настроек для мобильных устройств. Это элемент, которому требуется уникальный отступ, используемый однократно.

Например, клиент настаивает на том, что padding-small слишком маленький, а padding-medium слишком большой. Он хочет что-то посередине.

Вместо того, чтобы включать этот уникальный однократно используемый отступ в систему служебных классов, мы можем создать пользовательский класс для элемента и продолжить нашу работу. Например, мы можем использовать класс about-testimonial-title с margin-bottom: 2.25rem для создания однократно используемого уникального отступа.

Когда мы не уверены в необходимости дополнять систему служебных классов отступов проекта, мы можем создать однократно используемый отступ для такого конкретного элемента.

Важно понимать, что чем больше мы создаем однократно используемых пользовательских классов для отступов, тем меньше мы следуем глобальной единой системе отступов. Это не должно быть распространенной практикой, не стоит это использовать для каждого элемента.

Варианты использования: Отступы с помощью CSS Grid

1. Отступы между дочерними элементами в списке

Основное применение CSS Grid заключается в создании отступов между элементами списка. Если есть ряд соседних элементов, между которыми нужны одинаковые отступы, применение CSS Grid к родительскому контейнеру - эффективный способ размещения этих элементов.

Пример использования CSS Grid для ссылок в футере

Рассмотрим пример со ссылками в футере.

У нас есть родительский контейнер footer_links-column, в котором находятся ссылки в футере. Мы можем применить display: grid с рядами для создания равных отступов между всеми ссылками в футере.

Если мы хотим изменить отступы между всеми ссылками в футере, мы можем внести одно изменение в класс footer_links-column. Изменение отступов между рядами позволит нам настроить отступы между всеми ссылками в футере.

Это отличная стратегия для списка элементов, которым требуются отступы. Одно изменение дает возможность обновить все отступы между элементами.

Пример CSS Grid для карточек контента

CSS Grid также работает с дочерними элементами контента.

У нас есть "карточки контента", вложенные в список. Каждая карточка содержит вложенные элементы. Мы можем применить CSS Grid непосредственно к карточке контента, чтобы создать отступ между иконкой, заголовком и текстом внутри нее.

CSS Grid применяется к benefits_item и влияет на элементы внутри него.

Мы можем изменить значения рядов CSS Grid и повлиять на все содержимое элементов benefits_item с помощью одного модификатора.

Эта стратегия хорошо работает, если отступы между всеми дочерними элементами одинаковые. В нашем примере отступы между всеми дочерними элементами benefits_item составляют 1rem. Такой вариант идеально подходит использования CSS Grid.

Чтобы добавить дочерний элемент с другими значениями отступов в CSS Grid, мы можем использовать наш служебный класс обертки для создания отступов вместе с использованием метода CSS Grid.

В примере ниже мы добавляем кнопку в карточку контента. Для этой кнопки мы хотим создать отступ 3rem от текста. Но это не сработает со значениями Grid, примененными к benefits_item.

Под текстом мы можем добавить обертку для создания отступов, в который поместим кнопку.

Теперь обертка для создания отступов padding-top padding-medium создает дополнительный отступ внутри системы CSS Grid benefits_item.

Обертки для создания отступов отлично подходят для использования стратегии отступов CSS Grid, когда нам требуется гибкость и вариативность.

Это хорошо работает для создания глобально контролируемых отступов в контенте.

benefits_item может быть повторяющимся компонентом на сайте.

Некоторые карточки benefits_item содержат CTA, некоторые не содержат CTA, а некоторые могут содержать совершенно новые элементы.

Мы можем сохранять единые глобальные отступы benefits_item с помощью наших модификаторов CSS Grid и при этом имеем возможность создавать специфичные отступы для конкретных элементов.

Адаптивные отступы

Для создания адаптивных вариантов отступов предназначена система классов spacer-.

Система spacer- использует только один класс, поэтому добавление второго класса для создания адаптивного комбо-класса одобрено Client-First.

В стратегиях с двумя классами к элементу уже применены два класса. Добавление третьего приведет к созданию длинного стека (3 класса). Что еще важнее, создание комбо-класса на базе стека классов, который с большой вероятностью может измениться, не является хорошей стратегией создания комбо-классов. Мы не рекомендуем и избегаем использования адаптивных вариантов в стратегиях блоков и оберток, состоящих из двух классов.

Гибкость spacer- для планшетов и мобильных устройств

Используйте комбо-классы is- для внесения изменений в базовые служебные отступы на разных брейкпоинтах.

Если элементу требуется spacer-large, но на меньшем брейкпоинте нужен уникальный размер отступа, мы можем добавить комбо-класс к классу spacer-, чтобы настроить отступ для нижних брейкпоинтов. Например, если нам нужно уменьшить пространство только на мобильных устройствах, мы можем использовать spacer-large is-mobile-small.

Если адаптивная настройка сфокусирована на конкретном элементе, мы можем использовать более специфическое именование комбо-класса, например: spacer-large is-home-tabs. Использование комбо-класса позволяет нам сохранять глобальный служебный отступ на десктопе, а затем вносить специфические для конкретного экземпляра настройки для меньших брейкпоинтов.

padding-section-[size]

padding-section-[size] - это набор служебных классов, которые помогают нам глобально управлять верхними и нижними внутренними отступами в секциях на глобальном уровне по всему проекту.

Служебный класс padding-section-[size] следует использовать на том же Div-блоке, к которому применен класс padding-global, чтобы уменьшить количество вложенных элементов, как показано в примере ниже:

Это гибридный подход между пользовательским классом и служебным классом. Мы можем управлять всеми отступами наших секций как глобальным служебным классом.

В нашу папку со служебными классами padding- добавляется новая папка под названием section-.

• padding-section-small
• padding-section-medium
• padding-section-large

Если вертикальный отступ секции является пользовательским или уникальным, мы можем:

• Рекомендация: Использовать блоки отступов для создания уникального пространства сверху и снизу секции. Этот метод соответствует системе служебных отступов.
• Применить уникальный отступ к внешнему уровню раздела, section_[section-identifier].

Опциональное добавление отступов на теги заголовков

Мы можем захотеть, чтобы каждый тег заголовка имел одинаковые отступы сверху и снизу. Мы хотим унифицировать отступы в нашей системе типографики.

Например, каждый H2 в проекте имеет margin-bottom: 2rem

Отступы на тегах заголовков хорошо работают, если мы можем влиять на дизайн проекта. В таком случае, мы можем использовать очень формализованную систему отступов. Это метод для дополнительной унификации типографики в проекте.

Если мы работаем над сайтом с большим количеством вариаций заголовков и разными вариантами дизайна заголовков, создание отступов на тегах заголовков может быть не лучшей стратегией.

Если мы будем переопределять множество отступов, заданных по умолчанию для заголовков, мы создадим для себя больше работы.

Если все или большинство заголовков должны иметь одинаковые отступы во всем проекте, это может быть эффективной стратегией.

У нас есть полное объяснение этого метода отступов для типографики в Стратегии типографики.

Flex или grid для кнопок и строк с кнопками

Используйте CSS flex или grid для создания простых кнопок.

Пример кнопки с иконкой

Создайте кнопку с текстом и иконкой. Примените flex или grid к элементу кнопки для создания отступа между текстом и иконкой.

Это простой и быстрый способ создания кнопки с несколькими вложенными элементами.

Пример строки кнопок

Создайте горизонтальный отступ между двумя кнопками. Задайте горизонтальные отступы между кнопками через родительский контейнер.

Используя flex или grid на родительском контейнере, мы можем создать горизонтальные отступы между кнопками.

Применение margin-right непосредственно к классу button ограничит то, как мы можем использовать button. Мы хотим, чтобы наша кнопка правильно позиционировалась во всех случаях, а не только в строке кнопок.

Применение блоков отступов для горизонтальных отступов может быть неэффективным на мобильных устройствах. Многие мобильные дизайны требуют специфических горизонтальных отступов. Блоки отступов не позволяют нам вносить корректировки для мобильных разрешений.

Мы считаем, что flex или grid идеально подходят для создания отступов в ряду кнопок.

Избегайте служебных отступов для задания размеров внутренних элементов

Мы не рекомендуем использовать служебные классы для создания отступов вокруг содержимого элемента. Эта стратегия не противоречит правилам CSS и мы можем получить требуемый результат, но мы хотели бы избежать такой практики. Это способствует возникновению избыточного сложения классов и приводит к конфликтам мобильных стилей.

Обычно отступы для внутренних элементов требуют специфических настроек размеров для каждого разрешения. Система отступов Client-First не управляет значениями отступов для разных разрешений.Вместо этого задайте отступы для внутреннего элемента непосредственно с помощью пользовательского класса.

Создание папки пользовательских классов для блоков отступов

Термин отступ (spacer) может использоваться и для пользовательских классов.

Официально мы используем его как систему служебных классов: spacer-.

Но мы также можем использовать его как пользовательский класс для управления всеми уникальными пользовательскими отступами в проекте: spacer_.

Если есть повторяющийся элемент, отступы которого должны управляться глобально, мы можем использовать spacer_[название_элемента] для управления отступом этого конкретного кастомного элемента. Эта новая папка spacer_ полезна для организации всех специфических отступов элементов, которые должны оставаться глобальными.

• spacer_header
• spacer_sticky-nav
• spacer_title-primary
• spacer_title-subtitle
• spacer_footer

Мы можем использовать эту папку spacer_ для чего угодно, даже для чего-то специфического, например, spacer_home-faq.