kebab-case Converter — CSS, URLs & HTML Attribute Rules

What is kebab-case?

kebab-case writes all words in lowercase and separates them with hyphens. No spaces, no uppercase letters, no other separators. The name is a visual joke: the words look like chunks of meat threaded onto a skewer.

Examples of kebab-case identifiers:

• nav-bar — a CSS class for a navigation bar
• primary-button — a component or utility class
• data-user-id — an HTML data attribute
• /api/user-profiles — a REST API path segment
• how-to-compress-images — a URL slug for a blog post

Where kebab-case is the standard

• CSS class names: the entire CSS ecosystem uses kebab-case. BEM (Block Element Modifier) methodology writes .nav-bar__item--active. Tailwind CSS utility classes are kebab-case (text-sm, bg-primary). Hyphens are valid in CSS identifiers; underscores are not prohibited but are never used in practice.
• HTML attributes: the HTML specification defines custom data attributes as data-* with kebab-case names (data-product-id, data-toggle-state). ARIA attributes also follow kebab-case (aria-label, aria-expanded).
• URL slugs: both Google and the W3C recommend hyphens in URL paths. A path like /image-compressor is indexed as two keywords ("image" and "compressor"). The same path with underscores (/image_compressor) is treated as a single opaque token by Google's older crawlers, reducing keyword matching.
• REST API paths: the RFC 3986 URI specification does not mandate a convention, but the majority of public APIs (GitHub, Stripe, Twilio) use kebab-case path segments (/api/pull-requests, /api/payment-methods).
• npm package names: the npm registry uses kebab-case for package names: react-dom, date-fns, lodash-es.
• Vue and Web Components: custom HTML element names are required by the specification to contain at least one hyphen (<my-component>, <nav-bar>), making kebab-case mandatory.

kebab-case vs snake_case — SEO impact

For URL slugs, hyphens have a concrete SEO advantage over underscores. Google's documentation explicitly states that it recommends hyphens as word separators in URLs. The historical reason is that underscores were originally used as word-joiners in URLs (e.g. USENET conventions), so the crawler treated image_compressor as a single word rather than two separate keywords.

In practice, modern Google crawlers treat both hyphens and underscores as word separators in most cases. However, the recommendation to use hyphens has not changed, and sticking to kebab-case URLs is the safe choice for new projects.

Why you cannot use kebab-case in JavaScript

JavaScript (and most programming languages) parse the hyphen as the subtraction operator. Writing const nav-bar = … is a syntax error — the parser reads it as const nav minus bar. This is why JavaScript variables, functions and properties use camelCase or snake_case instead.

You can still use kebab-case strings in JavaScript for purposes like className strings, CSS-in-JS or data attribute values:

• element.className = 'nav-bar' — assigning a CSS class string is valid
• element.setAttribute('data-user-id', '42') — data attributes are strings
• const cssClass = 'btn-primary' — a string value containing a hyphen is valid

Frequently asked questions