IT Market
Инструменты/Текст/Регистр/camelCase в kebab-case: конвертер онлайн
camelCase → kebab-case

Конвертер стилей именования

Коротко об инструменте

camelCase в kebab-case: конвертер онлайн

Инструмент разбивает идентификатор по заглавным буквам и склеивает части через дефис: backgroundColor превращается в background-color. Дефисный регистр — родной для CSS, для HTML-атрибутов data-* и для человекочитаемых адресов страниц, поэтому конвертация нужна каждый раз, когда имя из JavaScript переезжает в стили или в маршрут. Текст обрабатывается скриптом страницы, список не уходит на сервер и не попадает в историю запросов. Смотрите также: перевести те же имена в snake_case, из snake_case в дефисы, сделать URL-слаг из заголовка.

Как пользоваться

  1. Вставьте идентификаторы в поле «camelCase текст» — по образцу подсказки myVariableName, по одному имени в строке.
  2. Нажмите «Конвертировать»: каждая заглавная буква станет границей слова, а между словами появится дефис.
  3. Сверьте поле «kebab-case результат» — аббревиатуры вроде URL или ID стоит проверить глазами, они разбиваются не всегда так, как нужно.
  4. Нажмите «Копировать», чтобы забрать весь список целиком в файл стилей или в конфиг маршрутов.
  5. Для обратного перехода к переменным JavaScript используйте отдельный конвертер kebab-case в camelCase.

Вопросы и ответы

Как правильно превратить имя переменной в имя CSS-класса?

Возьмите идентификатор из кода, прогоните через конвертер и используйте результат как есть: CSS исторически пишется через дефис, и класс .user-card-title читается лучше, чем .userCardTitle. Единственное, что стоит сделать вручную, — убрать из имени служебные приставки вроде is или tmp, они полезны в коде, но не в разметке.

Что происходит с аббревиатурами вроде parseHTMLString?

Правило простое и механическое: граница ставится перед каждой заглавной буквой, поэтому parseHTMLString даёт parse-h-t-m-l-string. Для таких имён приведите аббревиатуру к виду Html в исходнике или поправьте результат руками — автоматически различить аббревиатуру и цепочку слов невозможно.

Можно ли конвертировать сразу список из нескольких сотен имён?

Да, поле принимает многострочный текст, и каждая строка обрабатывается отдельно. Ограничение только в отзывчивости вкладки: несколько тысяч строк обработаются, но браузер на секунду замрёт. Если имена лежат в CSV, вставляйте нужную колонку, а не весь файл.

Подходит ли kebab-case для адресов страниц?

Да, и это рекомендация самих поисковых систем: слова в пути URL разделяют дефисом, потому что он трактуется как разделитель, а подчёркивание — как часть слова. То есть /order-history читается роботом как два слова, а /order_history — как одно, что хуже для запросов.

Что будет с цифрами и с русскими буквами в имени?

Цифры остаются на месте и границей слова не считаются: user2Name даст user2-name. Кириллица проходит без изменений, потому что понятия заглавной границы для смешанного имени здесь нет, но идентификаторы с русскими буквами в CSS и URL всё равно лучше не использовать — их придётся кодировать.

Чем kebab-case отличается от snake_case на практике?

Разделитель разный, и области применения тоже. Дефис — это CSS, HTML-атрибуты, адреса страниц и имена npm-пакетов. Подчёркивание — Python, SQL и имена файлов, где дефис может быть воспринят как минус. В одном проекте обычно живут оба стиля, каждый в своём слое.

Примеры

Имена классов из объекта стилей
До: primaryButton modalOverlay userAvatarSmall
После: primary-button modal-overlay user-avatar-small
Адрес страницы из названия компонента
До: orderHistoryPage
После: order-history-page — готовый сегмент ЧПУ вида /account/order-history-page