Kebab-Case Explained: CSS, URLs, and When to Use It

What is Kebab-Case?

Kebab-case (also called spinal-case, lisp-case, or slug-case) uses lowercase letters with hyphens as separators. The name comes from the appearance of words skewered together on a hyphen, like food on a kebab skewer.

Examples: background-color, user-profile, get-started, my-awesome-project

Why CSS Uses Kebab-Case

Kebab-case is the official naming convention for CSS properties and is strongly recommended for class names and IDs:

background-color: red;

font-family: Arial;

border-top-left-radius: 8px;

The reason is historical — CSS was designed before camelCase became dominant in JavaScript, and hyphen-separated names were the web standard at the time.

Kebab-Case for URLs

Kebab-case is the SEO best practice for URL slugs:

• ✓ /what-is-kebab-case — readable, SEO-friendly
• ✗ /what_is_kebab_case — Google treats underscores as word connectors, not separators
• ✗ /WhatIsKebabCase — case-sensitive URLs can cause duplicate content

Google's John Mueller has specifically recommended hyphens over underscores in URLs because search engines treat hyphens as word separators.

Where Kebab-Case is Used

|---|---|

Kebab-Case vs snake_case for URLs

Both are used, but hyphens are preferred for URLs:

|---|---|---|

When NOT to Use Kebab-Case

Kebab-case cannot be used for identifiers in most programming languages because the hyphen conflicts with the subtraction operator:

• first-name in JavaScript would be interpreted as first minus name

Use camelCase or snake_case for variable and function names in code.