Тулси
Назад в блог

Технологии

CamelCase, snake_case и kebab-case: где какой стиль

8 мин чтения

CamelCase, snake_case и kebab-case решают одну задачу: убрать пробелы из имени, чтобы его можно было вставить в код, адрес или класс. Отличаются регистром букв и разделителем. camelCase склеивает слова и поднимает первую букву каждого следующего: userName. snake_case пишет всё строчными через подчёркивание: user_name. kebab-case ставит дефис: user-name. В JavaScript и TypeScript чаще camelCase, в Python и SQL чаще snake_case, в CSS и в slug адреса обычно kebab-case. Если нужно быстро перевести фразу из тикета в нужный стиль, откройте конвертер регистра на Тулси: браузер соберёт варианты на устройстве. Ниже: как устроен каждый стиль, где его ждут языки и файлы, как сверить результат глазами. Про ВЕРХНИЙ / нижний для заголовков писем читайте в статье конвертер регистра текста.

Три стиля на одной фразе

Возьмите слова order client id. Без пробелов в коде их пишут по-разному. camelCase даёт orderClientId. snake_case: order_client_id. kebab-case: order-client-id. Смысл один, каркас разный.

PascalCase рядом: OrderClientId. От camelCase отличается только первой заглавной. Его берут для классов и компонентов. В этой статье PascalCase упоминаем как соседа camelCase, не как четвёртый «основной» стиль для URL.

Ошибка в одном знаке меняет имя целиком. orderClientId и order_client_id для программы разные идентификаторы. Поиск по проекту, миграции и автодополнение ломаются, если в одном файле смесь стилей.

Люди ищут «camelcase», «snake case» и «camel case», когда уже держат фразу и хотят правило или готовый перевод. Правило короткое. Список из двадцати имён руками всё равно долго. Тогда открывают конвертер.

camelCase: как читать и писать

Слова сливаются. Первое слово строчное, каждое следующее начинается с заглавной. Пробелов, _ и - внутри нет. Пример: getUserProfile, isActive, maxRetryCount.

Граница слова видна по стыку aB: маленькая буква, затем большая. Так же читает конвертер на Тулси: режет по стыкам и собирает заново. Если вставить уже готовый camelCase, инструмент разберёт его на слова.

snake_case и kebab-case: разделители

snake_case держит все буквы строчными и ставит _ между словами: get_user_profile. kebab-case то же, но через дефис: get-user-profile. В коде дефис в имени переменной чаще запрещён: его читают как минус. Поэтому kebab живёт в CSS, в именах файлов и в пути URL.

Смесь вроде get_User-profile значит, вы склеили стили вручную. Вернитесь к одной схеме на весь файл или модуль.

Где какой стиль принят

Стиль выбирает экосистема и договорённость команды, не вкус автора одной строки. Перед массовой правкой гляньте соседние имена в репозитории или в документации API.

JavaScript и TypeScript: переменные и функции в camelCase (fetchOrders), классы и React-компоненты в PascalCase (OrderList). Python: функции и переменные в snake_case (fetch_orders), классы в PascalCase (OrderList). SQL и многие JSON-поля бэкенда тоже тяготеют к snake_case.

CSS-классы, HTML-атрибуты вроде data-*, имена файлов на диске и сегменты URL любят kebab-case: order-list, /api/user-profile. В адресе подчёркивание допустимо, но дефис читается привычнее и реже ломается при копировании.

JavaScript, TypeScript, Java

В JS/TS camelCase для локальных имён стал нормой через линтеры и руководства команд. Java и C# близки: методы в camelCase, типы в PascalCase. Если вы копируете имя из тикета «user profile id» в метод, берите userProfileId, не user_profile_id, если вокруг уже camel.

Исключения бывают в конфигах и в ответах API, которые пришли со snake_case с бэкенда. Тогда не переименовывайте поля ответа «для красоты» в клиенте без отдельного слоя перевода имён: контракт важнее единого стиля в одном файле.

Python, SQL, CSS и URL

Python-руководства (PEP 8) прямо просят snake_case для функций и переменных. Колонки в SQL часто user_id, created_at. CSS: .user-card, #main-nav. Путь страницы: /blog/camelcase-snake-case-kebab.

Для slug из русского заголовка сначала нужна латиница или транслит, потом kebab. Конвертер регистра не переводит слова: он только меняет регистр и разделители. Опечатку в исходнике он повторит во всех вариантах.

CamelCase и snake_case рядом: что выбрать

Оба стиля убирают пробелы. Выбор зависит от языка файла, куда вы вставляете имя. В одном Python-модуле новая функция в camelCase выглядит чужой. В React-компоненте user_name как имя переменной тоже чужой.

Запрос «camelcase и snake case» в поиске часто значит: «покажите разницу на примере». Разница: разделитель и регистр. camel склеивает и поднимает буквы на стыках. snake разделяет _ и держит строчные.

Если в проекте рядом JS-фронт и Python-API, договоритесь на границе: какие имена в JSON. Часто API отдаёт snake_case, а клиент переводит поля в camelCase. Менять стиль «на глаз» в каждом слое без правила даёт двойные ключи и сбои при разборе ответа.

Для разовой правки одной фразы откройте конвертер регистра, вставьте исходник и скопируйте строку под свой язык. Для пакетного переименования в проекте удобнее поиск по редактору кода.

Как переключить стиль имени в браузере

Откройте конвертер регистра на Тулси. Вставьте фразу или уже готовое имя. Ниже появятся строчные, ЗАГЛАВНЫЕ, «Как В Предложении», camelCase, PascalCase, snake_case, kebab-case. У каждой строки кнопка копирования.

Браузер считает варианты на устройстве. Регистрация не нужна. Удобно для черновика из тикета, учебной пары примеров и проверки «как будет выглядеть slug».

Пустое поле даёт подсказку, что варианты появятся после ввода. Это норма. Как только есть хотя бы одно слово, список заполняется.

Что вставить в поле

Берите исходник без подписи «пример:» перед текстом. Уберите кавычки, если копировали из JSON. Если уже держите camelCase и хотите snake_case, вставляйте как есть: инструмент режет по стыкам заглавных.

Не вставляйте целый файл на тысячи строк ради одной переменной. Поле заточено под фразу или короткое имя из буфера.

Как забрать и проверить результат

Скопируйте нужную строку. Вставьте рядом с соседними именами в файле. Сверка глазами: в camel нет _ и -; в snake всё строчное и только _; в kebab только - и строчные.

Если нужен поиск по шаблону вроде всех user_* в тексте, откройте проверку регулярных выражений. Подробный разбор режимов ВЕРХНИЙ / нижний и путь по кнопкам: конвертер регистра текста.

Смежные задачи: regex и длина имени

Смена стиля закрывает каркас имени. Рядом по работе разработчика другие мелкие правки строки.

Нужно найти или заменить куски по шаблону: regex и статья regex для новичка. Нужна длина заголовка или имени поля под лимит формы: счётчик слов и как посчитать символы в тексте.

Строку из конфига иногда отдают в Base64. Кодирование: Base64. Регистр букв внутри алфавита Base64 трогать нельзя: a и A там разные символы кода.

Частые вопросы

Что такое camelCase простыми словами?

Это стиль записи нескольких слов без пробелов, где первое слово строчное, а каждое следующее начинается с заглавной буквы. Пример: orderClientId. Так часто пишут переменные и функции в JavaScript и TypeScript. Пробелы и подчёркивания внутри имени не ставят.

Что такое snake_case?

snake_case пишет слова строчными буквами и разделяет их символом подчёркивания. Пример: order_client_id. Стиль принят в Python, в SQL и во многих полях JSON на бэкенде. Для URL и CSS чаще берут kebab-case с дефисом.

Чем camelCase отличается от snake_case?

camelCase склеивает слова и поднимает буквы на стыках: userName. snake_case разделяет слова _ и держит строчные: user_name. Оба убирают пробелы из идентификатора. Выбор зависит от языка и правил команды, не от длины фразы.

Что такое kebab-case и где его используют?

kebab-case разделяет слова дефисом и пишет строчными: user-name. Его ставят в CSS-классах, в именах файлов и в сегментах URL. В имени переменной JavaScript дефис обычно нельзя: язык прочитает его как минус. Для кода берите camel или snake.

Camel case и camelCase: это одно и то же?

Да. «Camel case» и «camelcase» в поиске ведут к одному стилю записи. В коде имя пишут слитно: camelCase. Пробел между словами «camel» и «case» в разговоре нормален, в идентификаторе пробела нет.

Можно ли смешивать стили в одном проекте?

В одном файле и одном слое API лучше держаться одного стиля: иначе поиск и проверка кода страдают. На границе клиента и сервера смесь бывает осознанной (snake в JSON, camel в JS) через отдельный перевод имён. Случайная смесь user_Name-id в одном модуле почти всегда ошибка копирования.

Как быстро перевести фразу в camelCase или snake_case?

Вставьте исходник в конвертер регистра на Тулси и скопируйте нужную строку из списка. Браузер соберёт варианты на устройстве. Для сотен имён в репозитории удобнее встроенное переименование в редакторе кода.

Подходит ли kebab-case для имён переменных в Python?

Нет. В Python для функций и переменных ждут snake_case. Дефис в имени синтаксически недопустим. kebab оставьте для CSS, файлов и путей. Классы в Python пишут в PascalCase.

Конвертер меняет смысл слов или только стиль?

Только стиль: регистр букв и разделители. Перевода и «улучшения формулировки» нет. Опечатка в исходнике останется во всех вариантах. Сверяйте смысл глазами до вставки в продукт.

Данные из поля конвертера уходят на сервер?

В инструменте на Тулси варианты считает браузер на вашем устройстве. Регистрация для обычной работы не нужна. Боевые секреты и пароли в чужие вкладки всё равно не вставляйте по привычке.

Если нужно переключить camelCase, snake_case или kebab-case у одной фразы, начните с конвертера регистра. Режимы ВЕРХНИЙ / нижний и путь по кнопкам: конвертер регистра текста. Поиск по шаблону: regex.

Переключите стиль имени

Вставьте фразу: camelCase, snake_case, kebab-case и соседние варианты появятся сразу. Считается на устройстве.

Открыть конвертер
Поделиться статьей

Читайте также

CamelCase, snake_case и kebab-case: где какой стиль — Тулси