Kebab case: всё, что нужно о нём знать, и немного больше

Kebab case — это соглашение об именовании, используемое в программировании для оформления имён переменных, функций или файлов путём разделения слов дефисами (’-’). Его также называют ‘kebab-case’, ‘hyphen-case’ или ‘spinal-case’.

Например, если у вас есть переменная, представляющая имя человека, в kebab case вы напишете её так:

first-name

В kebab case все буквы пишутся в нижнем регистре, а слова разделяются дефисами, что делает код более читаемым и гарантирует, что имена не содержат пробелов или специальных символов, способных вызвать проблемы в некоторых языках программирования или файловых системах.

Kebab case часто применяется в HTML и CSS для именования свойств, классов и переменных.

Краткая история

Термин ‘kebab case’ как соглашение об именовании в программировании приобрёл популярность в конце XX и начале XXI века, в первую очередь благодаря его значимости в веб-разработке.

На заре веб-разработки в HTML и CSS использовались разные соглашения об именовании: подчёркивания, пробелы или camel case, что приводило к несогласованности в разных браузерах. Эта несогласованность породила потребность в более стандартизированном способе именования элементов в веб-документах.

Принятие универсальных идентификаторов ресурсов (URI) для веб-ресурсов в начале 2000-х годов ещё больше подчеркнуло важность согласованного именования. Пробелы или специальные символы в URL могли приводить к проблемам с кодировкой и ломать ссылки. В результате kebab case стал предпочтительным соглашением для именования ресурсов в URL.

В течение 2010-х годов kebab case получил широкое распространение в веб-сообществе для атрибутов HTML, имён классов и переменных в CSS. Он также нашёл применение в других языках программирования и в соглашениях об именовании файлов как способ создавать понятные и согласованные имена.

Хотя kebab case, возможно, не имеет такой долгой истории, как другие соглашения об именовании, его простота, согласованность и удобство для веб-разработки сделали его популярным выбором в современную эпоху. Важно помнить, что соглашения об именовании могут отличаться в разных языках программирования и сообществах, поэтому стоит придерживаться соглашений, принятых в конкретном проекте или языке, с которым вы работаете.

Примеры использования

Kebab case часто применяется в самых разных современных контекстах программирования, особенно в веб-разработке. Вот несколько примеров использования:

HTML и CSS

<div class="user-profile">

В HTML и CSS kebab case часто используется для имён классов, чтобы стилизовать конкретные элементы.

URL и маршрутизация

// Express.js route definition
app.get('/user-profile', (req, res) => {
  // Route handling logic
});

Kebab case часто используется при определении маршрутов в веб-фреймворках, таких как Express.js. Также он часто встречается в URL.

Параметры командной строки

my-script --option-name value

В консольных утилитах и скриптах kebab case иногда применяется для именования параметров и аргументов командной строки.

Имена файлов (веб-разработка)

header-styles.css
analytics-script.js
privacy-policy.html

В веб-разработке kebab case иногда используется для именования файлов, чтобы соответствовать соглашениям HTML и CSS.

Имена пакетов (Node.js)

npm install my-package-name

В Node.js kebab case часто применяется в именах пакетов при их публикации или установке через npm.

Имена атрибутов в HTML и XML

<button data-toggle-modal="my-modal">Open Modal</button>

Kebab case используется для пользовательских data-атрибутов в HTML и XML, чтобы они были более понятны человеку и сохраняли согласованность.

Переменные CSS

--primary-color: #3498db;

Kebab case часто используется при именовании переменных CSS для лучшей читаемости и удобства поддержки.

Frontend-фреймворки

<MyComponent prop-name="value" />

Некоторые frontend-фреймворки и библиотеки, такие как Angular и React, поощряют использование kebab case для именования свойств в JSX-компонентах.

Отредактировано 17.11.2023: предыдущая версия этой статьи ошибочно утверждала, что kebab-case является допустимым соглашением об именовании переменных и функций в JavaScript и Python. Спасибо @Art за то, что указал на ошибку.