camelCase, snake_case чи kebab-case: що обрати

camelCase, snake_case і kebab-case це передусім питання того, де живе назва. JavaScript і Java використовують camelCase (firstName), Python, Ruby і SQL використовують snake_case (first_name), а CSS, атрибути HTML і URL використовують kebab-case (first-name). Дотримуйтеся правил мови та стильового посібника вашої команди. Щоб перетворити текст між регістрами, безкоштовний конвертер регістру і безкоштовний генератор URL-слагів покривають більшість роботи прямо у браузері.

camelCase, snake_case і kebab-case одним поглядом

Стиль	Приклад	Де ви його побачите
camelCase	userFirstName	змінні та функції JavaScript і TypeScript, методи Java, JSON з багатьох веб-API
PascalCase	UserFirstName	назви класів у більшості мов, компоненти React, методи C#
snake_case	user_first_name	змінні та функції Python, Ruby, назви стовпців SQL, багато JSON-API
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	константи в багатьох мовах, змінні середовища
kebab-case	user-first-name	властивості та назви класів CSS, атрибути HTML, URL, назви файлів, прапорці CLI

Назви походять від своєї форми: camelCase має «горби» з великих літер, snake_case лежить рівно на підкресленнях, а слова в kebab-case нанизані на дефіси, як шашлик на шпажці.

Мова за мовою

JavaScript і TypeScript. Змінні та функції пишуть у camelCase (getUserName), класи й компоненти React у PascalCase (UserCard), а константи часто в SCREAMING_SNAKE_CASE (MAX_RETRIES). Вбудовані функції мови теж так називаються, як-от getElementById і toLowerCase.

Python. PEP 8, стильовий посібник Python, використовує snake_case для функцій, змінних і назв модулів, CapWords (PascalCase) для класів, а великі літери з підкресленнями для констант. Написати getUserName у Python можна, але кожен розробник Python помітить, що це виглядає недоречно.

CSS і HTML. Властивості CSS записуються в kebab-case (background-color, font-size), і більшість систем назв класів іде за ними (.nav-item, .card-title). Атрибути data- в HTML теж у kebab-case, а браузери перетворюють їх для JavaScript: data-user-id стає element.dataset.userId. Цей один рядок добре пояснює, чому існують обидва підходи.

SQL і бази даних. Назви стовпців і таблиць зазвичай у snake_case (created_at, order_items). Багато баз даних приводять назви без лапок до одного регістру, тож createdAt може непомітно стати createdat, якщо його щоразу не брати в лапки. snake_case цього уникає.

URL і назви файлів. Використовуйте kebab-case. Рекомендації Google щодо структури URL радять дефіси замість підкреслень для розділення слів, бо дефіси чітко позначають межі слів. Нижній регістр також запобігає зламаним посиланням на серверах, які вважають About.html і about.html різними файлами. Дивіться що таке URL-слаг і наші найкращі практики URL-слагів.

JSON і API. Єдиного правила немає. Багато API, орієнтованих на JavaScript, використовують camelCase, а багато бекендів на Python або Ruby повертають snake_case. Оберіть один стиль для кожного API і ніколи не змішуйте їх в одній відповіді.

Що легше читати?

Усі три стилі зручні, коли звикнете. Кілька практичних відмінностей:

• snake_case і kebab-case зберігають чіткий проміжок між словами, що допомагає з довгими назвами та абревіатурами (html_parser проти htmlParser проти HTMLParser).
• camelCase коротший і не потребує додаткових символів.
• kebab-case не можна використовувати для назв змінних у більшості мов, бо user-name читається як «user мінус name».
• Подвійне клацання виділяє всю назву в snake_case або camelCase в більшості редакторів, але в kebab-case зазвичай зупиняється на дефісах.

Справжнє правило це послідовність. Файл, де змішано userName, user_name і UserName, читати важче, ніж будь-який один стиль, використаний скрізь.

Перетворення між регістрами

Перетворення потрібне, коли дані переходять між шарами: created_at з Python API стає createdAt у JavaScript, заголовок сторінки стає URL, а назва налаштування стає змінною середовища.

Щоб перейти до kebab-case або snake_case: використовуйте генератор слагів. Вставте слова, по одній назві в рядку, і оберіть Дефіси (-) для kebab-case або Підкреслення (_) для snake_case. Він переводить усе в нижній регістр, перетворює літери з діакритичними знаками на прості і прибирає символи. Він вважає будь-який символ межею слова, тож user_first_name стає user-first-name і навпаки. Але camelCase він не розбиває: userFirstName стане userfirstname. Спершу поставте пробіли між словами.

Щоб перейти до SCREAMING_SNAKE_CASE. Зробіть версію в snake_case у генераторі слагів, потім вставте її в безкоштовний конвертер регістру і натисніть ВЕЛИКІ ЛІТЕРИ. У зворотний бік малі літери перетворюють MAX_RETRIES на max_retries.

Щоб перейти до camelCase або PascalCase. Однієї кнопки немає. Найшвидший шлях: напишіть слова з пробілами, натисніть Великі початкові в конвертері регістру (user first name стане User First Name), потім приберіть пробіли для PascalCase або зробіть малою першу літеру для camelCase.

Багато назв одразу, у коді. Для великого перейменування скористайтеся пошуком і заміною в редакторі з регулярним виразом. Спершу перевірте шаблон у безкоштовному тестері регулярних виразів: наприклад, _([a-z]) знаходить кожне підкреслення, за яким іде літера, тобто місце, де в camelCase потрібна велика літера. Багато редакторів уміють писати захоплену літеру великою в заміні; синтаксис дивіться в документації вашого редактора.

На що звернути увагу під час перетворення

• Абревіатури. Вирішіть, чи буде це userId або userID, HtmlParser або HTMLParser, і дотримуйтеся обраного.
• Числа. address_line_2 перетворюється чисто, addressLine2 теж нормально; просто не втратьте цифру.
• Публічні назви. Перейменування поля JSON або URL ламає всіх, хто ними користується. Додайте переспрямування для URL і зберігайте старі назви полів у API ще деякий час.

Перетворіть свій текст

Використовуйте безкоштовний конвертер регістру для ВЕЛИКИХ ЛІТЕР, малих літер і Великих початкових, а генератор слагів для kebab-case і snake_case. Обидва працюють у браузері, і нічого з того, що ви вставляєте, не залишає ваш пристрій.