What Is kebab-case? Use in URLs and CSS

kebab-case writes every letter in lowercase and joins words with hyphens (-), named after ingredients skewered on a kebab.

The rules of kebab-case

user profile image becomes user-profile-image in kebab-case. It is also called spinal-case or dash-case.

It differs from snake_case only in using hyphens instead of underscores.

Where it is used

• URL paths and slugs (e.g. /my-blog-post)
• CSS classes and custom properties (--main-color)
• HTML data attributes (data-user-id)
• File names and npm package names

Why hyphens in URLs and CSS

In many programming languages underscores are allowed in identifiers, but hyphens are read as subtraction and cannot be used in names. So hyphens naturally settled into areas outside code such as URLs, CSS and file names.

Search engines treat hyphens as word separators, while underscores are sometimes not, so hyphens are recommended in URLs.

A caveat

Hyphens cannot be used in code identifiers, so kebab-case is not used for things like JavaScript variable names. In those cases, convert to camelCase instead.