Конвертер стилей именования
Коротко об инструменте
Инструмент разбивает идентификатор по заглавным буквам и склеивает части через дефис: backgroundColor превращается в background-color. Дефисный регистр — родной для CSS, для HTML-атрибутов data-* и для человекочитаемых адресов страниц, поэтому конвертация нужна каждый раз, когда имя из JavaScript переезжает в стили или в маршрут. Текст обрабатывается скриптом страницы, список не уходит на сервер и не попадает в историю запросов. Смотрите также: перевести те же имена в snake_case, из snake_case в дефисы, сделать URL-слаг из заголовка.
Возьмите идентификатор из кода, прогоните через конвертер и используйте результат как есть: CSS исторически пишется через дефис, и класс .user-card-title читается лучше, чем .userCardTitle. Единственное, что стоит сделать вручную, — убрать из имени служебные приставки вроде is или tmp, они полезны в коде, но не в разметке.
Правило простое и механическое: граница ставится перед каждой заглавной буквой, поэтому parseHTMLString даёт parse-h-t-m-l-string. Для таких имён приведите аббревиатуру к виду Html в исходнике или поправьте результат руками — автоматически различить аббревиатуру и цепочку слов невозможно.
Да, поле принимает многострочный текст, и каждая строка обрабатывается отдельно. Ограничение только в отзывчивости вкладки: несколько тысяч строк обработаются, но браузер на секунду замрёт. Если имена лежат в CSV, вставляйте нужную колонку, а не весь файл.
Да, и это рекомендация самих поисковых систем: слова в пути URL разделяют дефисом, потому что он трактуется как разделитель, а подчёркивание — как часть слова. То есть /order-history читается роботом как два слова, а /order_history — как одно, что хуже для запросов.
Цифры остаются на месте и границей слова не считаются: user2Name даст user2-name. Кириллица проходит без изменений, потому что понятия заглавной границы для смешанного имени здесь нет, но идентификаторы с русскими буквами в CSS и URL всё равно лучше не использовать — их придётся кодировать.
Разделитель разный, и области применения тоже. Дефис — это CSS, HTML-атрибуты, адреса страниц и имена npm-пакетов. Подчёркивание — Python, SQL и имена файлов, где дефис может быть воспринят как минус. В одном проекте обычно живут оба стиля, каждый в своём слое.
До: primaryButton modalOverlay userAvatarSmall
После: primary-button modal-overlay user-avatar-small
До: orderHistoryPage
После: order-history-page — готовый сегмент ЧПУ вида /account/order-history-page
Оценка и фидбек помогают понять, что улучшать дальше.