Стратегия классов 1
Типы классов
Служебный класс
Служебный класс (Utility class) - класс, созданный с определенной комбинацией свойств CSS, который может быть применен к элементам глобально по всему проекту.
Все служебные классы по своей природе являются глобальными классами. Концепция служебного класса заключается в том, что это класс, который помогает применять глобальные свойства CSS внутри всего проекта.
Например, мы добавили служебный класс background-color-primary в стартовый проект Client-First, чтобы помочь организовать и управлять часто используемыми фоновыми цветами в проекте.
Мы добавили служебный класс font-size-large в стартовый проект Client-First, чтобы помочь организовать и управлять унифицированным размером типографики в проекте.
Служебные классы не используют подчеркивание в имени класса.
Пользовательский класс
Пользовательский класс (Custom class) - класс, созданный для определенных компонентов, страниц, группы элементов или отдельных элементов.
Мы называем это "пользовательским" классом, потому что настройки этого класса уникальны, и их нет в служебных классах нашего проекта. Пользовательские классы следует создавать, когда служебные классы не могут или не должны быть использованы для стилизации конкретного элемента. В этом случае пользовательский класс стилизует такой конкретный элемент.
Например, класс для стилизации определенного элемента в глобальных заголовках проекта, header_background-layer.
Например, класс для стилизации определенного элемента в слайде с отзывами, testimonial-slider_headshot.
В Client-First пользовательские классы используют подчеркивание в имени класса.
Глобальный класс
Глобальный класс (Global class) – класс, предназначенный для использования на всем проекте. И служебные классы, и пользовательские классы могут быть глобальными классами.
Глобальный класс применяет стили, которые остаются унифицированными по всему проекту. Глобальный класс не используют для какого-то конкретного элемента.
"Глобальный" означает везде, в любом месте проекта.
Все служебные классы являются глобальными классами. Служебные классы глобальны по своей природе.
Например, наши классы внутренних и внешних отступов являются глобальными служебными классами. margin-large имеет значение отступа 3rem. Когда мы обновляем это значение до 4rem, каждый элемент, который использует margin-large, обновится до 4rem.
margin-large является глобальным модификатором, который изменяет значение отступов по всему проекту. Мы можем легче вносить значительные, глобальные изменения в наш проект, когда правильно используем глобальные служебные классы.
Глобальные классы не ограничиваются служебными классами. Глобальные классы теперь более четко определены как любой тип класса, который предназначен для глобального управления стилями на всем сайте.
В Client-First v2 мы лучше объясняем и поощряем использование пользовательских классов в качестве глобальных классов.
Например, faq_item может быть глобальным пользовательским классом. У нас много разделов FAQ на сайте, и faq_item используется для управления элементами FAQ по всему проекту.
Например, header_content может быть глобальным пользовательским классом. У нас есть компонент заголовка на каждой странице проекта. Этот класс управляет глобальной настройкой этого контейнера по всему проекту.
Комбо-класс
Комбо-класс (Combo class) – класс, который является вариантом базового класса. Комбо-класс наследует стили от базового класса и добавляет к ним некоторые дополнительные стили.
Мы определяем "базовый класс" как первый класс в списке сложенных классов, из которых состоит комбинированный класс. Мы добавляем новый класс поверх базового класса, чтобы создать уникальное изменение.
Добавленный класс, который создает уникальное изменение базового класса, использует префикс класса is-.
Добавленные комбинированные классы будут работать только в сочетании со своими базовыми классами. Из видео ниже вы поймете, что класс is-brand не работает сам по себе. Он работает только как дополнение к базовому классу button.
Комбинированные классы могут быть созданы на основе пользовательского или служебного базового класса. В приведенном выше примере button is-brand вы видите комбинированный класс, используемый в качестве служебного класса.
Мы также можем создать комбинированный класс для пользовательского класса. Например, header_content is-home. Это вариант пользовательского класса header_content.
Мы определяем комбинированный класс в Client-First с помощью префикса is-. Когда мы видим is-, мы знаем, что этот класс создан как комбинированный класс поверх базового класса.
Не создавайте избыточное сложение классов
В Client-First есть универсальное правило — не создавайте избыточное сложение классов.
Избыточное сложение — добавление большого количества классов на элемент. Это происходит, когда мы добавляем слишком много классов поверх базового класса.
Этот термин используется в Client-First чтобы обозначить проблему, с которой мы можем столкнуться при использовании сложенных классов в Webflow Designer. Сложенные классы еще называют Мультиклассами.
Client-First не рекомендует использовать избыточное сложение классов в Webflow.
Например:
В Client-First мы рекомендуем не использовать избыточное сложение классов, как показано здесь. Мы будем напоминать о необходимости избегать избыточного сложения классов на протяжении всей документации.
Вот краткий список причин:
Причины, по которым мы избегаем избыточного сложения классов
Неудобство изменения порядка стилей в Webflow Designer.
У нас нет удобного контроля над сложенными классами в Webflow. Мы не можем переупорядочить их или должным образом управлять ими внутри Designer. Например, нам нужно изменить или удалить класс из списка сложенных классов. В этом случае нам придется удалить все более поздние классы из списка, прежде чем получить доступ к более ранним классам.
В приведенном ниже примере вы можете видеть, что нам нужно удалить некоторые классы, если мы хотим изменить насыщенность шрифта с text-weight-medium на text-weight-bold:
Эта проблема становится еще серьезнее, когда мы вносим изменения на мобильных разрешениях. У нас еще меньше контроля над редактированием, когда мы редактируем стили на мобильных брейкпоинтах.
Замедление рабочего процесса
Нам требуется совершить множество действий для небольших изменений. Рабочий процесс, описанный выше, занимает много времени. Если это постоянная практика в нашей работе, это увеличит время разработки.
Усложнение обучения
Мы считаем, что использование сложных комбинаций классов ведет к усложнению обучения, так как требуется более глубокое понимание того, что делают классы и как ими управлять.
Быстрое создание CSS в Webflow
Создание CSS происходит быстро и эффективно с использованием панели стилей Webflow. Мы можем быстро создать новый класс и визуально добавить ему нужные свойства CSS. Этот процесс очень быстр в Webflow, и мы используем его в Client-First.
Экономия размера CSS не слишком значительна
Когда мы используем глобальные классы в проекте, мы уменьшаем размер нашего CSS-файла. Мы не считаем, что небольшая экономия размера CSS перевешивает преимущества создания пользовательских классов внутри Webflow.
Мы подробнее остановимся на проблеме избыточного сложения классов позже. Полное объяснение каждого из этих пунктов есть в Стратегии классов 2.
Использование пользовательских классов
Пользовательские классы являются мощным и рекомендуемым инструментом при использовании Client-First.
Мы используем пользовательские классы для следующих целей:
- Для легкого редактирования конкретных элементов. Если мы используем организованную систему пользовательских классов, мы можем быстро вносить уникальные изменения в конкретные элементы и компоненты нашего проекта.
- Для избегания использования служебных классов повсеместно в нашем проекте. Системы служебных классов мощны, но не должны использоваться для создания всего проекта. Когда использование служебного класса усложняет работу разработчика Webflow, мы рекомендуем создать пользовательский класс. При использовании служебного класса должно быть ясное понимание преимущества.
- Для избегания избыточного сложения классов. Избыточное сложение может быть заменено пользовательским классом.
Пример использования текстуры фона
Например, мы хотим стилизовать текстуру фона на элементе.
Мы можем стилизовать текстуру фона с помощью трех сложенных классов. Например, background-absolute + fit-size + opacity-low. В сочетании эти три класса дают нам нужное сочетание стилей.
Вместо того, чтобы использовать несколько сложенных классов для настройки этой текстуры фона, мы можем создать пользовательский класс под названием services-item_background-texture. Класс четко указывает, что этот класс предназначен для "текстуры, которая находится на фоновом изображении элемента услуг".
Теперь мы можем быстро и свободно вносить изменения в этот пользовательский класс, вместо того чтобы реорганизовывать сложенные классы. Если нам нужна уникальная стилизация, у нас есть пользовательский класс, с помощью которого мы готовы ее создать.
Традиционная разработка CSS
В традиционной разработке CSS решение с использованием сложенных классов может быть неплохим. Сложенные классы требуют меньше записей в CSS, что ускоряет процесс разработки.
Однако это не традиционная разработка CSS. Это Webflow. Client-First - это совокупность принципов, созданных специально для Webflow.
При разработке в Webflow мы считаем, что создание и управление пользовательскими классами занимает меньше времени и усилий, чем управление большим списком сложенных классов. Создание пользовательских классов позволяет легко и быстро вносить изменения в стили элементов, делая рабочий процесс более эффективным.
Подробное объяснение о создании пользовательских классов приведено в Стратегии классов 2.
Соглашение об именовании классов
Создавайте понятные и конкретные имена для классов.
Разработчик Webflow, клиент или любой другой человек должны понимать, что делает класс на основе его имени, даже если они никогда раньше не слышали о Client-First.
Подход к именованию классов
Цели соглашения об именовании классов в Client-First
- Обеспечить возможность обслуживания сайта неспециалистами.
- Использовать ясные, информативные и описательные имена классов.
- Предоставлять максимум контекста о назначении каждого класса.
- Определять предназначение класса по его имени.
- Избегать сокращений, кратких форм и путаницы.
- Предоставлять максимально возможный контекст отношений между классом и сайтом.
- Создавать имена классов, используя методики для лучшей структурированности и читаемости.
- Применять ключевые слова для поиска доступных классов в панели стилей.
- Визуализировать назначение класса на основе его имени.
Вопросы, которые мы задаем себе при именовании классов
Имена классов должны указывать на то, что они делают. Создавая имя для класса, мы можем задуматься над следующими вопросами:
- "Что делает этот класс в проекте?"
- "Какова цель этого класса в проекте?"
- "Как я могу дать наибольший контекст о том, за что отвечает этот класс в проекте?"
Имя класса должно отвечать на эти вопросы.
Разработчик Webflow, клиент или маркетолог должны иметь возможность понять, что делает класс на основе имени класса, даже если они никогда раньше не слышали о Client-First.
Осмысленные имена и ключевые слова
Правильное ключевое слово дает нам контекст того, что делает этот класс/элемент. Более точное именование поможет нам оставаться организованными.
Ключевые слова и четкое именование - основные важные концепции Client-First. Каждое имя класса должно служить осмысленной цели. Мы должны дать следующему человеку, который входит в проект, максимум контекста о назначении класса.
Ключевые слова в имени класса идут от общего к конкретному
Рассмотрим пример text-size-large.
Основное ключевое слово в этом имени класса - это слово text. Это слово говорит нам о том, что данный класс имеет отношение к текстовому элементу.
size сообщает нам, что мы работаем с настройкой размера текста. Слово "size" более конкретно, так как оно относится к определенному CSS-свойству текста — font-size.
Далее идет large, которое дает нам более конкретную информацию о значении размера текста. Это крупный размер текста.
Заметьте, что мы не называем этот класс large-size-text. Хотя это может быть так же понятно, как и text-size-large, соглашение Client-First об именовании классов от общего к частному дает нам преимущества. Так мы обеспечиваем простой поиск классов и чистую организацию папок. Мы узнаем об этом больше далее в этой документации.
Рассмотрим пример с пользовательским классом, team-list_headshot-wrapper.
Имя папки - team-list_, что говорит нам о том, что данный элемент имеет отношение к странице команды или секции команды и является списком. "Team list" - это название группы, содержащей конкретные элементы.
headshot становится более конкретным и говорит нам о том, что это имеет отношение к элементу портретного снимка внутри списка команды.
wrapper становится еще более конкретным и сообщает нам, что это контейнер для портретного снимка.
Чтение имени класса team-list_headshot-wrapper ясно и логично, даже если пользователь не понимает CSS, стоящий за этим. Пользователь поймет, что редактирование этого класса что-то сделает с портретными снимками в списке команды. Это отличная подсказка для следующего человека, который войдет в проект.
Теперь представьте, что мы добавляем больше элементов внутри контейнера headshot. Мы можем оставаться очень организованными с соглашением об именовании от общего к частному.
- team-list_headshot-wrapper
- team-list_headshot-image
- team-list_headshot-texture-layer
- team-list_headshot-background
Такой список классов для списка команд очень структурирован и логичен внутри нашего проекта. Это соглашение об именовании очень хорошо согласуется с нашей Системой папок.