Папки
Введение в папки
Папки - это виртуальный инструмент организации для группировки и визуального управления классами в нашем проекте Webflow.
Мы можем визуализировать структуру папок для классов нашего проекта внутри Webflow Designer, следуя простому соглашению об именовании. Используя символ подчеркивания, мы можем создать виртуальную систему папок с Client-First.
Есть два типа папок: Папки пользовательских классов и Папки служебных классов.
1. Папки пользовательских классов
Используйте символ подчеркивания для создания папок классов проекта.
Благодаря этому новому соглашению об именовании, расширение Finsweet может автоматически генерировать виртуальную структуру папок внутри Designer.
Папки работают так:
Пользовательский класс - это класс, созданный для определенного компонента, страницы, группы элементов или отдельного элемента. Например, класс для стилизации слайдера или класс для стилизации глобальных заголовков проекта.
Пользовательские классы используют подчеркивание в имени класса.
Вот пример организованных по папкам классов проекта Webflow. На скриншоте выбран класс nav_primary_logo-wrapper.
В приведенном выше примере у нас есть первый уровень папки nav_.
Вложенная внутрь папка primary_.
Вложенное внутрь имя элемента logo-wrapper.
Полное имя класса для создания такой структуры в папке будет nav_primary_logo-wrapper. Система папок с подчеркиванием относится исключительно к пользовательским классам.
2. Папки служебных классов
Служебные классы в Client-First автоматически упорядочиваются внутри папки Utility.
Папки служебных классов работают так:
Служебный класс - это класс, созданный с определенной комбинацией свойств CSS, которые могут быть применены к элементам по всему проекту. Например, класс для background-color или класс для font-size.
Служебные классы не используют подчеркивание в имени класса.
У служебных классов нет таких же правил, как у системы папок пользовательских классов с подчеркиванием.
Любой класс без подчеркивания попадает в папку "Utility".
Классы с символом тире могут быть только служебными классами.
Папки Client-First автоматически группируют классы в папках по соответствующим ключевым словам. Ниже приведен скриншот стартового проекта Client-First. Классы в нем упорядочены по ключевым словам.
Папки пользовательских классов
Символ подчеркивания в папках
Папки пользовательских классов обозначаются подчеркиванием в имени класса.
folder-one_element-name
Представьте себе папки в Client-First, как папки на вашем компьютере. Мы даём имя папке и помещаем в неё элементы. Символ подчеркивания - это наш главный инструмент для создания папок пользовательских классов.
folder-one_folder-two_element-name
В проекте Webflow мы можем использовать папки так же, как используем папки на нашем компьютере. В папках могут быть элементы, и папки могут быть вложены в другие папки.
Папки помогают нам группировать, искать и получать доступ к элементам в нашем проекте.
В папки можно организовать:
- Небольшую группу элементов на странице
- Небольшую часть секции
- Секцию
- Группу секций
- Страницу
- Группу страниц
- Повторяющийся элемент
- "Новую" часть веб-сайта
Как группировать элементы
Подход, который мы выбираем для группировки элементов, зависит от требований проекта. Требования, размер и многие другие факторы могут влиять на то, как будет организована структура папок проекта. Каждый проект уникален и требует уникального подхода.
Сколько страниц в проекте?
Уникальны ли дизайн и макет для каждой страницы?
Есть ли повторяющиеся элементы?
Ответы на эти вопросы могут значительно повлиять на то, как мы организуем папки проекта.
Проекты уникальны, как и наши компьютеры.
Каждый компьютер содержит разные файлы и его настройка зависит от используемых файлов. Компьютер с 10 000 файлами будет иметь иную структуру папок, чем компьютер с 100 файлами.
В нашем проекте Client-First количество папок и их структура должны соответствовать количеству элементов, которые мы хотим в них поместить.
Папки могут быть вложены для достижения максимальной гибкости использования.
Мы можем создать хорошо продуманную структуру папок с множественным вложением для больших веб-сайтов с более сложными требованиями к структуре. Или можно использовать более простую структуру папок без вложений для меньших сайтов.
Нет ограничений на количество папок, которые можно использовать в имени класса. Структура папок зависит только от решения разработчика.
Целесообразность вложения папок
Используйте вложенные папки только тогда, когда это целесообразно для проекта. Не вкладывайте папки просто потому, что вы можете это сделать. Многие проекты могут иметь один уровень папок и не содержать вложенных папок.
Избыточное вложение или вложение без необходимости может затруднить управление вашим проектом.
В нашем примере с компьютерными файлами, наличие слишком большого количества папок для небольшого количества элементов затруднит навигацию по элементам. Поиск по вложенным папкам может быть раздражающим, если такое вложение не создано осмысленно.
То же самое относится к папкам в Client-First. Мы хотим быстро находить элементы, а не искать их во множестве вложенных папок.
Создание папок
Одно подчеркивание равно одной папке
Ниже мы показываем имена классов и то, как они распределяются в папки. Мы видим папки "home-testimonials", "header" и "careers".
Создание одной папки
-
home-testimonials_wrapper
-
home-testimonials_headshot
-
home-testimonials_text-small
-
header-top_content
-
header-top_image
-
header-top_accent-left
-
careers_custom-padding
-
careers_title-animation
-
careers_scroll-trigger
Сгенерированные папки
Имя папки генерируется на основе ключевого слова или слов, которые стоят перед символом _.
Создание вложенной папки
Мы создаем вложенную папку, добавляя второе подчеркивание.
Два подчеркивания равны двум папкам
Продолжим пример выше. Мы преобразуем каждый класс во вложенную папку. Теперь каждый класс содержит два подчеркивания.
Пример папок второго уровня вложенности
-
home_testimonials_wrapper
-
home_testimonials_headshot
-
home_testimonials_text-small
-
home_header-top_content
-
home_header-top_image
-
home_header-top_accent-left
-
home_careers_custom-padding
-
home_careers_title-animation
-
home_careers_scroll-trigger
Добавив второе подчеркивание, мы добавляем вложенную папку.
Папки пользовательских классов можно именовать, вкладывать и упорядочивать по вашему желанию. При работе с папками нет запретов или ограничений.
Папки служебных классов
В именах служебных классов не используется символ подчеркивания, у них есть только тире.
firstkeyword-secondkeyword-identifier
Примеры служебных классов
- text-color-primary
- text-color-secondary
- text-color-brand
- text-size-small
- text-size-medium
- text-size-large
- padding-top
- padding-large
- page-wrapper
- page-padding
Создание папок служебных классов
Папки создаются с ключевыми словами в имени классов. Вы можете создать столько уровней вложения папок служебных классов, сколько посчитаете нужным для проекта.
Сопоставление ключевых слов по индексу
В данном контексте слово "индекс" означает "позицию/порядок ключевого слова в текстовой строке".
Расширение Finsweet ищет соответствие ключевых слов по индексу (позиции) и группирует классы внутри папок служебных классов. Рассмотрим пример сопоставления ключевых слов по индексу, используя text-color-primary.
слово1-слово2-слово3 = text-color-primary
В приведенном выше примере,
- text = слово1
- color = слово2
- primary = слово3
Мы всегда создаем папку из первого слова (слово1). Папка "text" будет создана независимо от других названий классов в проекте.
Если хотя бы один другой класс имеет "text" как первое слово и "color" как второе слово, будет создана папка "color" внутри "text".
Когда мы находим два класса в проекте, которые начинаются с text-color-, мы создаем папку "color".
Мы можем добавить любое количество классов в папку color, соблюдая наше соглашение об именовании text-color-.
Нет совпадающих ключевых слов во втором слове
Если нет совпадающих ключевых слов во втором слове (слово2), класс останется в своей родительской папке. Разберем это на примере.
Если у нас есть класс text-indent-large и нет другого класса в проекте, который начинается с text-indent-, этот класс будет размещен в папке "text".
Папка "indent" не создается, потому что есть только один класс с "text" на первом месте и "indent" на втором месте. Других классов "indent" нет.
Как только мы добавляем соответствующий класс, например, text-indent-small, создается новая папка.
Нет совпадающих ключевых слов в первом слове
Выше мы объяснили, что "Мы всегда создаем первую папку из первого слова". Мы всегда будем создавать первую папку на основе первого слова, независимо от других названий классов в проекте.
Если у класса уникальное первое слово, и это первое слово больше нигде не встречается в проекте, все равно создается папка для первого слова, и этот класс будет являться единственным классом в папке.
Например, у нас есть класс в нашем проекте под названием filter-blur-extend. Если в нашем проекте нет другого класса со словом "filter" в качестве первого слова, мы увидим папку "filter" с blur-extend в качестве идентификатора названия класса.
Масштабирование папок служебных классов
Стартовый проект Client-First поставляется с организованной системой папок служебных классов. Мы можем добавлять, удалять или редактировать эти классы в зависимости от нашего проекта.
Рекомендуется добавлять и удалять папки служебных классов для каждого проекта Webflow.
Мы можем продолжать добавлять или удалять вложенные папки, используя совпадающие ключевые слова. Создайте классы с совпадающими первыми и вторыми словами, чтобы создать новую папку служебного класса.
Например, группировка классов для стилизации box-shadow:
- shadow-box-large
- shadow-box-medium
- shadow-box-small
- shadow-circle-large
- shadow-circle-medium
- shadow-circle-small
- shadow-blur-x
- shadow-blur-y
С этими классами мы только что создали папку shadow с тремя вложенными в нее папками — box, circle и blur.
Как принимать решения о создании папок
При организации классов нашего проекта требуется принимать много решений.
Некоторые решения следует принять до начала разработки, но многие решения можно принимать по мере разработки.
Мы можем потратить много времени на обдумывание организационных решений в нашем проекте Webflow. Быстрое и адекватное принятие решений приходит с практикой.
Наши навыки в принятии решений о структуре и наименованиях папок будут непрерывно улучшаться по мере использования Client-First. Наша скорость и точность работы улучшатся, когда мы привыкнем использовать папки в наших проектах.
Визуализация принятия решений
Мы разработали дерево принятия решений, чтобы облегчить принятие решений об организации классов.
Посмотрите PDF нашего дерева принятия решений о Папках. Эта модель визуализирует процесс мышления при выборе названия для папки.
Вопросы, заданные в дереве принятия решений, приведены ниже:
Используется ли этот класс для создания конкретного CSS стиля, который может быть использован на любом элементе? Например, text-size-large.
Используйте Папки Служебных классов. Лучшей практикой является продолжение работы со служебными классами, которые содержатся в стартовом клонируемом проекте Client-First.
Например: page-, heading-, text-, icon-, etc.
Если нужный вам стиль служебного класса не включен в клонируемый проект Client-First, создайте новую папку служебного класса.
Например: shadow-small, shadow-medium, shadow-large
Специфичен ли элемент для этой страницы?
Может быть хорошим подходом добавлять имя страницы в название класса.
Например:
- [page]-slider_pane
- [page]_slider-pane
- slider_[page]-pane
Является ли этот элемент частью конкретного компонента? Например, слайдера.
Может быть хорошим подходом использовать конкретное ключевое слово в названии класса.
Например:
- slider-clients_pane
- slider _clients-pane
Является ли этот элемент частью общего компонента, который может быть использован в любом месте проекта? Например, слайдер, который может быть использован в разных секциях сайта.
Может быть хорошим подходом сохранить общее название папки.
Например:
- slider_pane
Оптимизация рабочего процесса
Переименование папки (Массовое переименование классов)
Переименуйте все классы в папке за один проход.
Например, если мы переименуем папку testimonials_ в clients_, мы переименуем все классы внутри этой папки.
Это возможность упорядочить наш проект на любом этапе разработки. Мы можем изменить систему именования сотен классов за несколько минут.
Если мы используем библиотеку Relume, мы можем скопировать из нее компоненты с именами шаблонов в наш проект и массово переименовать их как нам удобно.
Данные класса/папки и их влияние на страницы
Откройте подробную информацию о классе, чтобы понять, как эта папка или класс влияет на нашу верстку.
Там есть та же информация, которая отображается в панели Style внутри Webflow Designer.
Просмотрите "Элементы, затронутые на этой странице" и "Элементы, затронутые на других страницах".
Доступ к этой информации есть на уровне папки или уровне идентификатора элемента.
С помощью этой функции мы можем полнее понять, как организованы папки нашего проекта и как они используются в проекте.
Копирование имени класса в буфер обмена
Скопируйте в буфер обмена имя любого класса.
Мы можем скопировать любую часть имени класса в зависимости от того, где мы смотрим информацию о классе.
Например, мы можем скопировать имя папки, просматривая информацию о классе на уровне папки.
Мы можем скопировать полное имя класса, просматривая информацию о классе на уровне идентификатора элемента.