Как пользоваться: Проверка опечаток в классах
- Введите URL опубликованной страницы (подойдёт и ваш тестовый домен
.webflow.io) и нажмите Проверить URL — или вставьте HTML, отдельный раздел либо просто список имён классов. - При желании вставьте CSS, чтобы также увидеть классы, которые есть в стилях, но не используются на странице, и классы без каких-либо стилей.
- Выберите правила именования для проверки: Client-First, BEM или без правил.
- Разберите результаты: нажмите на любую статистическую плитку, чтобы перейти к её списку, и переименуйте или объедините классы в Style Manager Webflow. При необходимости скачайте полный список классов в CSV.
Почему имена классов расходятся
В проекте Webflow, над которым работают несколько человек и который меняется на протяжении нескольких месяцев, имена классов постепенно приходят в беспорядок. Кто-то однажды набирает hero_heding, Webflow спокойно создаёт новый класс, и с этого момента половина заголовков использует опечатку. Элементы, добавленные из панели Add, получают автоматические имена вроде div-block-12 или text-block-3. Один дизайнер пишет hero-title, другой — hero_title. Каждый такой случай добавляет лишний CSS, глобальные изменения пропускают часть элементов и Style Manager становится труднее чистить.
Что находит проверка
| Проверка | Пример |
|---|---|
| Возможные опечатки (расстояние редактирования) | is-secondray рядом с is-secondary |
| Дубликаты в единственном и множественном числе | feature-card и feature-cards |
| Одинаковые слова с разными разделителями или регистром | hero-title, hero_title, heroTitle |
| Безымянные значения по умолчанию в Webflow | div-block-12, link-block-3, heading-7 |
| Проблемы с форматированием | Заглавные буквы, цифры в начале, двойные разделители, слишком длинные имена |
| Правила Client-First | Более одного нижнего подчёркивания, классы is- как базовые, комбо-классы без is- |
| Правила BEM | Вложенные элементы вроде card__body__title |
| CSS и HTML | Классы в стилях, но не на странице, или на странице без стилей |
Проверка опечаток настроена так, чтобы не давать ложных срабатываний: нумерованные серии (card-1, card-2, heading-style-h2/h3) и варианты по размеру или состоянию (margin-small/margin-large, is-active/is-inactive) не помечаются. Когда два имени похожи, в качестве правильного написания предлагается то, которое используется чаще.
Проверка всего сайта Webflow
Опубликованный CSS сайта Webflow содержит все стилизованные классы проекта, поэтому проверка по URL сравнивает страницу со всем списком классов. Это хороший способ найти опечатки даже в классах, которые используются на других страницах. Учтите, что «есть в CSS, но не на этой странице» означает только то, что класс не используется на проверенной странице, — перед удалением проверьте основные шаблоны. Собственные классы Webflow с префиксом w- игнорируются.
Исправление проблем в Webflow
- Переименуйте класс: выберите элемент, который его использует, затем дважды щёлкните класс в поле Selector — все элементы с этим классом обновятся.
- Объедините опечатку с правильным классом: выберите элементы с опечаткой, уберите её и примените верный класс; затем удалите неиспользуемый класс через Style Manager → Clean up.
- Договоритесь о соглашении для новых разделов: генератор имён классов создаёт единообразные имена Client-First или BEM, а HTML и CSS в Webflow вставляет размеченные разделы вместе с их классами.
Перед запуском или передачей проекта клиенту объедините эту проверку с SEO-проверкой, проверкой битых ссылок и файлом README для передачи.
Также ищут как: опечатки в css классах, webflow аудит классов, client-first проверка, неиспользуемые css классы, очистка webflow, div-block, линтер css классов.
Инструменты, которые хорошо сочетаются с Проверка опечаток в классах
- Конвертер регистра — Вставьте любой текст и преобразуйте его между 11 вариантами регистра: от Title Case для заголовков до camelCase и snake_case для кода.
- Сравнение текстов — Вставьте исходную и изменённую версии, чтобы увидеть добавленные, удалённые и изменённые строки рядом — с подсветкой точно изменённых слов внутри каждой строки.
- Редиректы с WordPress на Webflow — При переносе сайта с WordPress на Webflow меняется почти каждый URL: даты в путях блога, архивы /category/, закрывающие слэши и слаги страниц.
- Мост буфера Webflow — Webflow помещает элементы в буфер обмена в особом формате, который не переносится между браузерами (Firefox → Chrome, Safari → Edge и т.