Стратегия классов 2

Создание пользовательского класса

Убедитесь, что вы понимаете определение пользовательского класса в Client-First. См. определение в Стратегии работы с классами 1.

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

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

Преимущества пользовательских классов

1. Быстрое создание

Webflow, как платформа, был разработан вокруг визуальной стилизации веб-страницы с помощью панели Styles. Панель Styles - это большое преимущество в Webflow. Мы можем быстро создавать новые классы и применять к ним стили.

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

В Webflow у нас есть преимущество панели Styles, и мы должны им пользоваться.

В этом видео мы вручную прописываем стили для team-list_.

В этом видео мы визуально создаем стили для {team-list_} в Webflow.

2. Проще настраивать и безопаснее редактировать

Редактирование стилей пользовательского класса и служебного класса - это очень разные вещи.

Настройка элемента с пользовательским классом может быть очень очевидной и быстрой. В нашем примере с team-list_, нам нужно добавить дополнительный стиль в настройки display: flex.

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

3. Работа с планшетными и мобильными разрешениями

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

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

В этом примере мы изменяем team-list_ чтобы он выглядел иначе на планшете и мобильном устройстве. Пользовательский класс позволяет нам сделать это изменение с помощью панели Styles.

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

4. Работа с клиентами

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

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

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

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

Если клиентские правки не вписываются в систему служебных классов проекта, такие правки становятся более сложными. Нам понадобится новый класс для выполнения таких правок.

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

Использование глобальных классов

Убедитесь, что вы понимаете определение глобального класса в Client-First. См. определение в Стратегии работы с классами 1.

Глобальный класс должен быть простым, мощным и значимым.

Преимущества глобальных классов

1. Управление стилями на глобальном уровне во всем сайте.

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

Например, классы контейнеров в Client-First. container-large имеет значение max-width 80rem (1280px). Если мы хотим уменьшить max-width этого контейнера по всему сайту, мы можем обновить container-large до 75rem (1200px) одним изменением стиля.

Это глобальное изменение, которое обновляет все экземпляры container-large в проекте.

container-large является мощным глобальным модификатором в нашем проекте.

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

Мы можем захотеть использовать стиль CSS в качестве служебного класса, чтобы работать быстрее. Например, hide-tablet или hide-mobile-portrait.

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

В приведенном ниже примере мы хотим скрыть последние два элемента в списке только для мобильных устройств. Для этого мы используем hide-mobile-portrait, не создавая новый класс.

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

Осмысленное использование глобальных классов

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

Мы можем задать себе такие вопросы:

Есть ли у этого стиля преимущества управления на глобальном уровне?

Способствует ли это более быстрой верстке, эффективному использованию повторяющихся стилей или удобству клиента?

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

Пример с абсолютным позиционированием

Например, рассмотрим глобальный служебный класс под названием position-absolute, который добавляет CSS свойство position: absolute к элементу.

Нет причин менять стили этого класса глобально. Какие свойства CSS мы обновим в position-absolute? Нет разумной причины обновлять этот класс глобально по всему проекту.

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

Маловероятно, что стиль position-absolute улучшит скорость верстки проекта, поскольку ему требуются дополнительные классы. Вероятно, потребуются дополнительные классы для работы с мобильными разрешениями.

Поэтому мы предлагаем применять CSS свойства, такие как position, непосредственно к пользовательскому классу.

Мы не рекомендуем использовать класс вроде position-absolute в качестве глобального класса.

Пример темной секции

Глобальные классы должны иметь цель для глобальных изменений. Вносимые в глобальный класс изменения должны быть значимыми для всего сайта.

Например, мы можем использовать класс section-dark, чтобы применить color: #ffffff и background-color: #000000 к секции. Если section-dark применяется ко многим секциям по всему проекту, мы можем делать глобальные изменения темных секций.

Например, изменение background-color: #000000 на background-color: #111111 может быть сделано для одного класса section-dark и это изменение повлияет на весь проект.

Сложение глобальных классов

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

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

Сложение подобных классов

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

• Классы внешних отступов с классами внешних отступов
• Классы внутренних отступов с классами внутренних отступов
• Классы ширины с классами ширины
• Классы типографики с классами типографики

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

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

Примеры

Давайте посмотрим на два примера — внешний отступ и типографику.

Внешний отступ

Система отступов "Client-First" использует подход с использованием сложенных глобальных классов. Сначала мы применяем класс направления, margin-top. Затем мы применяем класс размера, margin-large.

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

Например, мы не стали бы добавлять класс max-width поверх этих классов, создающих отступ.

Мы приблизимся к избыточному сложению, если будем добавлять дополнительные классы поверх margin-top margin-large. Если разместить max-width-small в дополнение к классам для создания отступов, то будет сложно вносить быстрые изменения в класс margin-large. Мы должны будем удалить max-width-small перед изменением margin-large.

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

Типографика

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

Например, большой текст, который также имеет серый цвет. Текстовый элемент может получить классы text-size-large и text-color-gray для применения стилей.

Как и с отступами, мы не хотим добавлять больше классов.

Мы хотим, чтобы наши классы типографики были легко доступны в панели Styles. Если мы хотим обновить text-size-large, мы не хотим удалять множество классов после него, чтобы получить доступ к базовому классу.

Не добавляйте новые стили к сложенным глобальным классам

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

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

Продолжим с примерами выше — внешний отступ и типографика.

Пример с внешним отступом

Мы никогда не хотим создавать новый класс со сложенными классами внешнего отступа. Если у нас есть margin-top и margin-large, мы не должны применять какие-либо стили к этой сложенной комбинации.

Применение стилей таким образом создаст новый класс с новым набором стилей в файле CSS.

Пример с типографикой

Мы никогда не хотим создавать новый пользовательский класс со сложенными классами типографики. Если у нас есть text-size-medium и text-color-neutral, мы не должны применять новый пользовательский стиль к сложенным классам.

Это также приводит к созданию нового комбо-класса.

Решение

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

1. Начать с пользовательского класса с самого начала.

Вместо сложения классов text-size-medium text-color-neurtal, создайте пользовательский класс home-header_text с размером, цветом и дополнительным CSS стилем. Это дает нам полную гибкость стиля для добавления пользовательских стилей к элементу.

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

2. Используйте дополнительный класс для создания комбо-класса.

Мы создаем комбо-класс, добавляя новый класс к нашим служебным классам. Класс называется is-home-header, и комбо-класс создается для комбинации всех трех классов.

Этот метод сохраняет стилизацию в text-size-medium text-color-neutral, а настройка элемента осуществляется с помощью is-home-header. is-home-header содержит все необходимые пользовательские стили для этого элемента.

Этот метод наиболее удобен, когда мы хотим, чтобы определенные свойства CSS оставались глобальными в проекте. В данном примере свойства CSS font-size (text-size-large) и color (text-color-gray) остаются глобально контролируемыми.

Что такое комбо-класс?

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

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

Комбо-класс будет работать только в сочетании с базовым(и) классом(ами) перед ним. На видео ниже можно увидеть, что is-brand не работает сам по себе. Он работает только как дополнение к базовому классу button.

Ключевое отличие между сложенным глобальным служебным классом и комбо-классом:

• Комбо-класс создает новый класс и добавляет новое описание стиля в CSS-файл проекта.
• Сложенные глобальные классы не создают новый класс и не вносят изменения в файл CSS.

Префикс is-

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

Наследование стилей от базового класса

У комбо-классов есть одно основное требование для создания - комбо-класс должен иметь явное преимущество при наследовании стилей от базового класса.

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

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

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

Давайте рассмотрим пример системы комбо-классов для кнопки.

Класс button - это наш базовый класс. Все варианты стилей ниже находятся поверх класса button.

is-primary, is-alternative, is-inactive, is-dark

Мы можем добавить эти стили к button, чтобы создать вариацию кнопки. Важно понимать, что классы is- не будут работать самостоятельно. Они будут работать только как дополнение к классу button.

Класс button - это важный базовый класс в этом примере.

Мы хотим, чтобы все наши кнопки, независимо от варианта, имели одинаковый padding и font-size. Эти свойства определяются в базовом классе button.

Каждый из вариантов is- наследует эти важные глобальные стили от button.

Такая система комбо-классов для кнопок позволяет нам глобально обновлять свойства CSS padding и font-size для всех кнопок в проекте. Все кнопки по умолчанию и все вариации кнопок получат обновление глобального стиля.

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

Эта стратегия комбо-классов для кнопок - отличный пример мощного и эффективного использования комбо-классов.

Целевое использование комбо-классов

Комбо-классы – мощный инструмент. Их стоит использовать осторожно и c определенной целью. Плохо продуманная система комбо-классов может вызвать проблемы масштабирования и организации внутри проекта.

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

Пример контейнера — Система комбо-классов, которая не нужна

Мы рассмотрим пример системы комбо-классов container, использование которой не имеет явной цели.

Наш класс container изменяет несколько настроек: margin: 0 auto, width: 100% и значение max-width.

Соблазнительно создать комбо container is-large, is-medium, is-small. Кажется, что это идеальный кейс для комбо-класса, потому что у нас есть два общих свойства CSS и одно изменяемое свойство размера.

Однако два общих свойства CSS — margin и width — не являются свойствами CSS, которыми мы должны управлять глобально в базовом классе. Не является хорошей практикой менять эти свойства на какие-либо другие значения. Например, мы не хотели бы менять width: 100% на width: 90%. Кроме того, мы не хотели бы менять значения margin: 0 auto.

Поскольку нам не нужно управлять margin или width в базовом классе container, нет преимущества в использовании системы комбо-классов. Единственное свойство, которое нам нужно изменять - это max-width.

Вместо комбо-класса container is-large мы применяем все стили напрямую к одному классу — container-large. Мы всегда предпочитаем работать с одним классом, а не с комбо-классом. Если комбо-класс не требуется, мы предпочитаем его не использовать.

Кроме того, с указанием размера в имени класса, мы улучшаем читаемость имен классов в панели Navigator. Мы увидим container-large как имя класса, а не только container.

Пример типографики — Наследование десктопного разрешения и настройка для мобильных

Нам нужно настроить текстовый элемент, потому что он уникален на мобильных устройствах. На десктопе и планшете этот элемент соответствует стилю по умолчанию text-size-large. Для мобильных устройств сделать настройку, которая не соответствует нашему глобальному служебному классу по умолчанию.

1. Начните с пользовательского класса с самого начала.

У нас есть возможность создать новый пользовательский класс для управления типографикой на всех разрешениях. Например, home-header_text-subtitle. С таким подходом мы не используем систему служебных классов. Недостаток этой стратегии заключается в том, что мы больше не поддерживаем глобальные значения размера для десктопа и планшета. Если бы мы хотели внести глобальное изменение в класс text-size-large на десктопе, пользовательский класс не получит это изменение.

2. Используйте дополнительный класс для создания комбо-класса.

Если глобально управляемая типографика важна в нашем проекте, мы можем использовать новый комбо-класс. Например, text-size-large is-home-header. Преимущество такой реализации в том, что мы можем поддерживать глобальные стили на десктопе и планшете, а затем внести изменения только для мобильных устройств. Когда мы вносим глобальное изменение в класс text-size-large на десктопе, этот элемент получит эти обновления через глобальную систему.

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

Эта концепция работает для других систем служебных классов в проекте. Например:

• icon-medium is-footer
• button-primary is-nav
• heading-medium is-mobile-effect

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

Не допускайте избыточное сложение! Стратегия комбо-класса is- становится менее эффективной, когда возникает несколько сложенных глобальных классов. Например, text-size-large text-color-black text-style-underline is-testimonials-title — здесь слишком много сложенных классов.

Мы хотим избегать избыточного сложения во всех случаях.

Почему стоит избегать избыточного сложения

1. Проблемы при работе в панели Styles Webflow

У нас нет легкого контроля над комбо-классами в Webflow.

• Мы не можем изменить порядок сложенных классов внутри панели Styles.
• Мы не можем редактировать избыточно сложенные классы на мобильных разрешениях.
• У нас нет полного контроля для визуального управления сложенными классами в Designer.

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

Мы считаем, что это не эффективный рабочий процесс и врожденная проблема UX в Webflow.

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

2. Много шагов для небольших изменений

Описанные ограничения приводят к усложнению процесса редактирования избыточно сложенных классов.

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

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

3. Более сложное обучение

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

Пользователь, входящий в проект, должен:

• Хорошо разбираться в CSS
• Понимать, что делает каждый из сложенных классов
• Знать нюансы сложения классов в Webflow

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

4. Быстрая работа с CSS в Webflow

Нам не нужно экономить время на создание файла CSS в Webflow.

Объяснено полностью выше в Создании пользовательского класса > Преимущества пользовательских классов > 1. Быстрое создание.

5. Небольшая экономия CSS

В качестве примера небольшой экономии CSS сравним время загрузки CSS-файла размером 52kb с файлом 65kb – разница будет очень незначительной.

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

Ограничения избыточного сложения

В Client-First мы используем сложение классов, но не хотим злоупотреблять избыточным сложением. Ниже мы рассмотрим количество классов, сложенных на элемент.

Как избежать избыточного сложения

1. Используйте один пользовательский класс

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

2. Используйте дополнительный Div блок

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

Основная структура, используемая в Client-First, использует этот подход. Вместо сложения многих классов на одном элементе, мы разделяем классы по типу и используем несколько вложенных слоев элементов.

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

Такой же принцип применяется в системе отступов Client-First. Например, при реализации концепции обертки для создания отступов, мы отделяем margin-top и margin-large от других элементов.

3. Создайте комбо-класс

Например: section_header + is-mobile-reverse + background-color-brand + text-color-alternate

Может превратиться в section_header + is-home-header

Мы наследуем важные глобальные стили от section_header, например, padding, z-index и transition.

Наш класс is-home-header - это комбо-класс, который добавляет background-color, текст color, и изменения в верстке на мобильных разрешениях к элементу.

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

Без flex, grid, column или иных систем размещения элементов

Flex, grid, column или layout классы не включены в Client-First.

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

Первый пример того, что нам не нравится

Давайте создадим grid с помощью служебных классов. Этот пример не является практикой Client-First. Более того, это пример того, почему в Client-First не включены системы размещения элементов.

grid-3-col gap-large tablet-grid-2 mobile-grid-1

Теперь представьте, что клиент просит уменьшить отступы между элементами на планшете. Внешний отступ gap-large, который нам нужен на десктопе, больше не нужен на планшете. Нам нужен намного меньший отступ. Однако мы наследуем наш gap-large с десктопа.

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

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

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

Второй пример того, что нам не нравится

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

Например, flex-a-l-j-c + flex-mobile-a-c устанавливает настройки flex на базовом разрешении и мобильную вариацию.

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

Мы также не хотим видеть col-2-d + col-5-t + col-12m.

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

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

Пример того, что может работать с Client-First

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

Например, grid_col-2 и grid_col-3 могут быть использованы как стандартные макеты с 2 и 3 колонками. На десктопе они будут одинаковы, но можно создать комбо-класс is-specific-instance для планшетных и мобильных разрешений.

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

Настраивайте размещение элементов с помощью пользовательских классов

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

Пользовательские классы отлично подходят для позиционирования элементов. Пользовательские классы позволяют нам:

• Быстро создавать структуру страниц
• Быстро вносить изменения в будущем
• Производить настройку на мобильных разрешениях
• Предотвратить случайное нарушение позиционирования на всем сайте
• Передавать наш проект другим разработчикам с минимальным порогом входа