Что такое kebab-case? Использование в URL и CSS

kebab-case пишет каждую букву строчной и соединяет слова дефисами (-); он назван так по аналогии с ингредиентами, нанизанными на шампур кебаба.

Правила kebab-case

user profile image превращается в user-profile-image в kebab-case. Его также называют spinal-case или dash-case.

От snake_case он отличается только использованием дефисов вместо подчёркиваний.

Где он используется

• Пути URL и слаги (например, /my-blog-post)
• CSS-классы и пользовательские свойства (--main-color)
• Атрибуты данных HTML (data-user-id)
• Имена файлов и имена пакетов npm

Почему дефисы в URL и CSS

Во многих языках программирования подчёркивания допустимы в идентификаторах, но дефисы читаются как вычитание и не могут использоваться в именах. Поэтому дефисы естественно закрепились в областях вне кода, таких как URL, CSS и имена файлов.

Поисковые системы воспринимают дефисы как разделители слов, тогда как подчёркивания иногда нет, поэтому в URL рекомендуются дефисы.

Одно предостережение

Дефисы нельзя использовать в идентификаторах кода, поэтому kebab-case не применяется, например, для имён переменных JavaScript. В таких случаях преобразуйте в camelCase.