Как пользоваться: Генератор имён классов Webflow
- Опишите секцию простыми словами: что это (hero, features, pricing, FAQ, footer…) и что в ней есть («подзаголовок, заголовок, две кнопки, картинка справа», «3 карточки с иконкой и ссылкой»).
- Выберите соглашение об именовании: Client-First (система Finsweet для Webflow), BEM или Simple kebab-case. Структура обновляется по мере ввода.
- Нажмите на любой класс в дереве, чтобы скопировать его, или Копировать все для полного списка. Классы с пунктирной рамкой — комбо-классы.
- Нажмите Скопировать структуру в Webflow и вставьте результат в Designer, чтобы получить всё дерево элементов с классами и стартовыми стилями макета. Или откройте её в конвертере HTML и CSS, чтобы сначала отредактировать.
Зачем нужно именование классов в Webflow
Каждый класс, который вы создаёте в Webflow, попадает в Style Manager и в CSS сайта. Без системы в проектах копятся имена вроде div-block-47, Heading 3, hero-title и heroTitle — их сложно переиспользовать и тяжело передавать другим. Соглашение об именовании делает классы предсказуемыми: любой участник команды (или клиент через несколько месяцев) понимает, что такое pricing_plan-name и где это используется.
Три соглашения
| Client-First | BEM | Simple | |
|---|---|---|---|
| Секция | section_hero | hero | hero-section |
| Элемент | hero_heading | hero__heading | hero-heading |
| Вариант | button is-secondary | hero__button--secondary | button is-secondary |
| Макет | padding-global › container-large › padding-section-large | hero__container | container |
Client-First от Finsweet — самая популярная система в сообществе Webflow: нижнее подчёркивание отделяет «папку» (компонент) от элемента — hero_content, hero_image-wrapper. Утилитарные классы отвечают за типографику и отступы (heading-style-h1, text-size-medium), а комбо-классы начинаются с is-. BEM (Block, Element, Modifier) — классическое соглашение фронтенда, которое хорошо подходит, если команда также пишет код вне Webflow. Simple kebab-case подойдёт для небольших сайтов.
Что понимает генератор
Он распознаёт типы секций (hero, features, testimonials, pricing, FAQ, stats, logos, team, steps, CTA, navbar, footer и другие), содержимое (подзаголовок, заголовок, подзаголовок-абзац, абзац, кнопки, картинка, видео, форма, список, бейдж), повторяющиеся элементы с количеством («3 карточки», «шесть вопросов», «4 статистики») и подсказки по макету («картинка слева», «по центру», «две колонки»). Кнопки используют глобальный класс button с комбо-классом is-secondary — так устроено большинство гайдов по стилям в Webflow.
От имён к готовой секции
Если включён Стартовый CSS макета, структура получает разумные значения по умолчанию: ширину контейнера, отступы секции, двухколоночную сетку, которая перестраивается на планшете, сетку карточек, которая становится одноколоночной на телефоне, и стиль кнопки. Скопируйте всё в Webflow — и у вас будет рабочий каркас, на котором можно строить дизайн. Для точной настройки откройте код в HTML и CSS в Webflow, поправьте его и вставьте обратно. Позже проверьте страницу с помощью проверки опечаток в именах классов, чтобы поймать ошибки до запуска.
Советы по именованию
- Называйте по назначению, а не по внешнему виду:
pricing_planпереживёт редизайн,blue-box— нет. - Делайте префикс папки коротким и единообразным (
hero_,pricing_,footer_). - Используйте комбо-классы для вариантов одного и того же (
is-featured,is-dark), а новые классы — для разных сущностей. - Переиспользуйте глобальные классы (
button,container-large) вместо создания нового для каждой секции.
Также ищут как: webflow class names, client-first, именование классов css, bem нейминг, соглашение об именовании css, идеи для имён css классов, finsweet client-first.
Инструменты, которые хорошо сочетаются с Генератор имён классов Webflow
- SVG в Webflow — Вставьте SVG из Figma и скопируйте его в Webflow как настоящие Custom Elements.
- Конвертер регистра — Вставьте любой текст и преобразуйте его между 11 вариантами регистра: от Title Case для заголовков до camelCase и snake_case для кода.
- Генератор slug — Превратите любой заголовок в чистый URL-slug в нижнем регистре.
- Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
Часто задаваемые вопросы
Что такое Client-First?
folder_element (например, hero_heading), глобальные утилитарные классы для типографики и отступов и комбо-классы, которые начинаются с is-. Этот генератор следует её правилам, но не связан с Finsweet.Что лучше использовать в Webflow: Client-First или BEM?
Используется ли здесь ИИ?
Можно ли вставить структуру в Webflow напрямую?
Что означают классы с пунктирной рамкой?
button is-secondary.