Введение в Client-First
Обзор методологии Client-First
Официальный стартовый проект Client-First доступен по ссылке.
Цели Client-First
- Сформировать систему для эффективной организации нашего проекта
- Увеличить скорость и удобство разработки при использовании Webflow Designer
- Определить стратегию использования классов в проекте
- Создать единую основную структуру, общую для всех страниц
- Сверстать проект на Webflow так, чтобы его было легко поддерживать и масштабировать
- Сделать проект понятным для разработчиков, клиентов и всех остальных
Что значит "Client-First"?
Сделав наших клиентов главным приоритетом, мы создали систему стилей, которая удовлетворяет их потребности и делает нас лучшими разработчиками Webflow.
Большинство клиентов хотят, чтобы мы
- Создали масштабируемый проект Webflow
- Создали проект быстро, не теряя в качестве
- Создали проект, который могут поддерживать разные разработчики в нашем агентстве
- Создали проект, который мы можем передать другому разработчику или Webflow-агентству, если клиент решит сменить подрядчика
- Создали проект, которым клиент может управлять самостоятельно внутри Designer *
* Не все клиенты хотят самостоятельно управлять своим проектом Webflow. Некоторые хотят, но большинство - нет.
Решения в Client-First помогают нам более эффективно разрабатывать проекты на Webflow, а также способствуют созданию проектов, приносящих максимальную пользу нашим клиентам.
Соглашение об именовании классов
Client-First фокусируется на понятном именовании классов в проекте.
Цели соглашения об именовании классов Client-First:
- Дать возможность человеку без технических навыков управлять нашим веб-сайтом.
- Стремиться к ясности, информативности и описательности при именовании классов.
- Предоставить разработчику или пользователю как можно больше информации о назначении класса.
- Стремиться к тому, чтобы по названию класса была понятна его цель.
- Избегать сокращений, не использовать краткие записи, исключить путаницу.
- Предоставлять как можно больше информации о том, как класс связан с веб-сайтом.
- Создавать названия классов с использованием префиксов и ключевых слов.
- Стремиться к тому, чтобы название класса отражало его назначение.
Краткий обзор тем
Введение представляет собой краткий обзор ключевых тем Client-First, которые мы подробнее рассмотрим далее в документации. Однако это далеко не все принципы Client-First.
Эта страница призвана дать обзор самых значимых тем. Ее стоит прочитать, если вы рассматриваете возможность использования Client-First при создании проектов в Webflow.
Стратегии для работы в Webflow
- Стратегия классов
- Стратегия основной структуры
- Стратегия типографики
- Стратегия отступов
- Стратегия папок
Отказ от ответственности: Эти стратегии не соответствуют всем лучшим практикам традиционной разработки HTML и CSS. Но они и не должны быть традиционными, ведь это Webflow. Webflow изменил подход к работе с HTML и CSS, создав систему визуальной верстки. Client-First создан специально для оптимизации и упорядочивания рабочего процесса в Webflow Designer.
Стратегия классов
Мы разделяем классы на "пользовательские классы" и "служебные классы", используя символ подчеркивания _.
Пользовательские классы содержат подчеркивание _ в названии класса
header-primary_content
Служебные классы не содержат подчеркивание _ в названии класса
text-color-black
Пользовательские классы
Пользовательские классы обычно используются для стилизации конкретных элементов на странице.
Пользовательский класс создается для конкретного компонента, страницы, группы элементов или одного элемента. Например, класс для стилизации слайдера команды или класс для стилизации глобальных заголовков проекта. Пользовательские классы используют подчеркивание в названии класса.
- about-team_component
- footer_column
- clients-slider_arrow
- nav_link
- home-header_texture
- form_component
- form_wrapper
- form_block
- form_label
- form_input
- form_submit
Каждый из этих примеров указывает на конкретный элемент.
Служебные классы
Служебные классы обычно используются для важных CSS-стилей на странице.
Служебный класс создается для конкретной комбинации CSS-свойств, которые могут быть применены к элементам во всем проекте. Например, класс для background-color или класс для font-size. Служебные классы не используют подчеркивание в названии класса.
Примеры:
- padding-global
- max-width-small
- margin-large
- text-color-blue
- background-color-black
- display-none
Глобальные классы
Глобальные классы – это пользовательские или служебные классы, которые могут использоваться на всем сайте.
Глобальный класс предназначен для использования по всему проекту. Глобальный класс не предназначен для конкретного элемента. Он применяет стили, которые останутся 'глобальными' или 'едиными' по всему проекту.
Пользовательский класс также может быть глобальным классом, например header_content. У нас может быть повторяющаяся структура заголовка, используемая на протяжении всего проекта, и этот класс позволит нам управлять стилями header_ глобально.
Если мы намереваемся использовать класс на протяжении всего сайта, он считается глобальным.
Комбинированные классы
Комбинированные классы – это классы, создаваемые как вариант базового класса. Комбинированный класс наследует стили из базового класса и добавляет к ним дополнительные стили.
Комбинированный класс варианта is- будет работать только в сочетании с базовым классом (или классами) перед ним. Вместе такие сложенные классы составляют комбинированный класс.
В видео ниже показано, что класс is-brand не работает сам по себе. Он работает только в качестве дополнения к базовому классу button.
Комбинированные классы могут быть созданы из пользовательских или служебных классов. Пример выше button is-brand показывает служебный класс, выступающий в качестве части комбинированного класса.
Стратегия Основной структуры
В Client-First мы используем Основную структуру для всех проектов.
- page-wrapper
- main-wrapper
- section_[identifier]
- padding-global padding-section-[size]
- container-[size]
- page-wrapper оборачивает все содержимое страницы.
- main-wrapper содержит все "основное" содержимое страницы. Это часть лучших практик по обеспечению веб-доступности сайта.
- section_[identifier] упорядочивает панель Navigator в Webflow Designer.
- padding-global задает универсальные внутренние отступы слева и справа для содержимого страницы на всем сайте.
- padding-section-[size] задает универсальные верхние и нижние внутренние отступы секций на всем сайте.
- container-[size] задает максимальную ширину контейнеров, которые оборачивают наше содержимое.
Используя эту Основную структуру, мы можем задавать важные CSS-свойства глобально во всем проекте. Эта методика задает единый подход для работы всех разработчиков в рамках Client-First.
Показанная ниже структура может использоваться на большинстве веб-сайтов.
Пример структуры страницы
Секции организованы внутри Navigator и работают как якорные ссылки при кликах по ним.
Пример структуры секции
Внутри Основной структуры мы создаем компоненты и визуальные элементы с помощью пользовательских классов. Мы используем пользовательские классы для стилизации элементов, которые не должны управляться служебными классами.
Стратегия типографики
Наша стратегия заключается в том, чтобы сохранить типографику унифицированной и глобально управляемой насколько это возможно. Мы используем служебные классы для управления типографикой.
В идеале, мы не должны присваивать классы текстовым элементам. Лучше всего наследовать стандартные стили, применяемые непосредственно к тегам HTML body, paragraph и H1 - H6.
HTML теги
Что такое HTML теги? Страница Webflow University.
Всегда начинайте со стилизации этих тегов: H1, H2, H3, H4, H5, H6, body
Это стандартные стили для каждого типа заголовка и для основного текста нашего проекта.
Вы можете найти набор служебных классов в официальном клонируемом проекте Client-First. Каждый из этих классов имеет префикс heading- или text- и содержит служебные стили для применения к текстовым элементам. Такие классы позволяют вносить изменения с использованием единой системы служебных классов.
Классы типографики:
- heading-style-[h#]
- text-weight-[weight]
- text-size-[size]
- text-style-[css-property]
- text-color-[color]
- text-align-[alignment]
Например, если мы хотим сделать заголовок H1 в том же стиле, что и наш заголовок H2, мы можем применить класс heading-style-h2 к нашему H1. Это сделает H1 стилизованным как H2, при сохранении тега H1 для нужд SEO.
Например, если мы хотим сделать какой-либо текстовый элемент в проекте синего цвета, и у нас есть служебный класс text-color-brand, связанный с этим синим цветом, мы можем применить text-color-brand к этому текстовому элементу, и он станет синим.
Оба этих примера представляют собой изменение стандартных стилей типографики. Если стандартные стили H1 или текстового элемента не изменяются, то класс не требуется.
Стратегия отступов
Работу с отступами можно разделить на две части:
- Использование служебных классов
- Использование пользовательских классов
Каждая часть содержит две основные стратегии создания отступов.
Использование служебных классов
Классы margin- и padding-, заданные в Служебных классах Client-First.
В рамках концепции служебных классов, мы выделяем две стратегии создания отступов:
- Стратегия блоков для создания отступов
- Стратегия контейнеров для создания отступов
И блоки, и контейнеры основаны на одних и тех же служебных классах отступов.
Блоки и контейнеры отличаются друг от друга тем, как они используются на странице.
Стратегия блоков для создания отступов
В Client-First, "блок для создания отступа" - это пустой Div блок, который создает пространство между двумя соседними элементами.
- Добавьте на страницу "блок для создания отступа" — Div блок с двумя классами — [padding-bottom] + [padding-size]
- Добавьте на страницу элементы контента до и после блока для создания отступа.
- Блок для создания отступа создаст пространство (padding) между элементами.
Стратегия контейнеров для создания отступов
В Client-First, "контейнер для создания отступов" - это Div блок, который оборачивает дочерний элемент и создает пространство между ним и соседним элементом.
- Добавьте на страницу "контейнер для создания отступов" — Div блок с двумя классами — [margin/padding-direction] + [margin/padding-size]
- Вложите элемент контента внутрь контейнера для создания отступов.
- Контейнер для создания отступов создаст пространство (margin или padding) между собой и соседним элементом.
Использование пользовательских классов
Стратегия пользовательских классов
Согласно стратегии пользовательских классов, мы задаем значения margin и padding непосредственно на элемент, для которого требуется создать отступы.
Например, мы применяем faq_title к Заголовку, если для его требуется создать уникальный отступ, который нельзя задать с использованием системы служебных классов. CSS свойство margin-bottom: 0.75rem применяется непосредственно к классу faq_title.
Стратегия CSS Grid
Стратегия отступов CSS Grid применяет CSS Grid к родительскому контейнеру, создавая отступы для дочерних элементов внутри него.
Мы можем создать вертикальные и горизонтальные отступы между дочерними элементами с помощью CSS grid.
Вместо применения множества блоков, контейнеров или пользовательских классов к элементам списка, мы можем использовать стратегию CSS Grid для управления всеми дочерними элементами с помощью одного элемента — родительского контейнера.
Мы полностью изучаем стратегию отступов на странице документации Стратегия отступов.
Стратегия папок
В Client-First реализована функция виртуальных папок с помощью расширения Finsweet.
Символ подчеркивания имеет большое значение в Client-First
Символ подчеркивания определяет пользовательские классы и папки. Мы можем создавать виртуальные папки для наших пользовательских классов с помощью символа подчеркивания.
Например, blog_header_graphic представляет собой папку blog_ с вложенной папкой header_, внутри которой находится графический элемент graphic.
Вот как это выглядит в виртуальной системе папок:
Если мы не используем символ подчеркивания, то так создается служебный класс. Служебные классы автоматически размещаются внутри папки Utility.
Любой класс без подчеркивания будет помещен внутрь папки Utilities.
Каждая вложенная папка внутри папки Utility будет создана из первого ключевого слова в имени класса.
Например, text-color-primary отражает такую структуру папок:
В папке служебных классов Utility находится папка text- , внутри которой - папка color- с вложенным элементом primary.
Вот как это выглядит в виртуальной системе папок:
Благодаря функционалу папок, мы можем упорядочить проект как нам удобно. Для малых и больших проектов подходы к организации папок будут отличаться. Проекты, созданные на заказ, будут использовать иной подход к организации папок, чем библиотеки компонентов.
Папки дают нам возможность адаптировать стратегию разработки под конкретный проект.
Мы подробно изучаем этот функционал на странице документации Стратегия папок.
Размеры и rem
Client-First использует rem. Rem - это единица измерения для значений, которые мы задаем в Designer.
Что такое rem?
Rem означает "root ephemeral unit" (корневая относительная единица) или "root em".
- Rem - это относительная единица измерения, основанная на размере шрифта корневого элемента.
- Корневой элемент - это <html>.
- Rem зависит от размера шрифта <html>.
- Все размеры, применяемые в Client-First, заданы в rem.
Математика
Каждые 16px это 1rem, когда размер шрифта установлен по умолчанию в настройках браузера. При создании нашего проекта Webflow, мы используем 16px как наше базовое значение для расчета rem.
Каждое преобразование измерения rem в проекте кратно 16.
Почему rem?
Использование Rem дает значительные преимущества для улучшения веб-доступности, что мы в Client-First особенно ценим.
Настройки шрифта браузера и масштабирование браузера идеально работают в системе, основанной на rem. Использование Client-First в сочетании с рекомендуемой системой rem гарантирует соблюдение лучших практик в области веб-доступности и масштабирования контента.