kebab-case: The Web Developer's Complete Guide
kebab-case is the standard for URLs, CSS properties, HTML attributes, and npm package names. This guide explains where it's required, why hyphens are used instead of underscores, and how it compares to other case formats.
Published August 15, 2025 · By Sudip Bhowmick
Every URL you've ever visited, every CSS property you've ever written, and most npm packages you've ever installed use kebab-case. It's the native naming format of the web — the case style that HTML, CSS, and URL specifications were built around. Despite being ubiquitous, many developers don't know it by name or understand exactly where it's required versus where it's simply conventional.
What Is kebab-case?
In kebab-case, words are separated by hyphens (-) and all letters are lowercase. No spaces, no underscores, no capital letters. Words are connected by hyphens the way pieces of meat are skewered together on a kebab skewer — which is exactly where the name comes from.
Alternate names for the same format include spinal-case, lisp-case, and slug-case, depending on the community and context.
- ▸background-color
- ▸font-size
- ▸border-radius
- ▸my-component
- ▸data-user-id
- ▸react-router
Where kebab-case Is Required
CSS property names: Every multi-word CSS property uses kebab-case — background-color, font-size, border-radius, margin-top, text-transform, line-height. This is defined by the CSS specification itself. Writing background_color or backgroundColor as a CSS property will not work.
HTML attributes: Custom data attributes and ARIA attributes are always kebab-case — data-user-id, data-track-event, aria-label, aria-describedby. Standard HTML attributes like accept-charset and http-equiv also use kebab-case.
URL slugs: Web URLs use kebab-case for path segments. Google recommends hyphens over underscores in URLs because Google's crawlers treat hyphens as word separators but treat underscores as joining characters. The URL /blog/title-case-rules-explained is indexed as three separate words; /blog/title_case_rules_explained is treated as one compound term.
npm packages: All npm package names are lowercase and typically use kebab-case — react-router, lodash, express, @tanstack/react-query, vue-router. Package names cannot contain uppercase letters per the npm registry specification.
CLI flags and options: Command-line tools use kebab-case for flags — --dry-run, --output-file, --max-retries, --no-cache.
The Hyphen vs Underscore Question
The choice between hyphen (kebab-case) and underscore (snake_case) is not about preference — it's determined by context. Using the wrong one in the wrong place breaks things.
In most programming languages, the hyphen (-) is the subtraction operator. Writing my-variable in Python, JavaScript, or Java causes a SyntaxError — the interpreter reads it as my minus variable. This is why kebab-case cannot be used for variable names in mainstream languages.
In CSS, the situation is reversed. CSS property names are kebab-case by specification — background_color is not a valid CSS property.
This is the fundamental reason the two formats occupy different domains: the hyphen that makes kebab-case valid in URLs and CSS makes it invalid in variable names.
kebab-case in Modern Web Frameworks
Vue.js: Vue component names are PascalCase in JavaScript but referenced as kebab-case in HTML templates. <MyComponent /> in a .vue file is the same as <my-component></my-component> in an HTML template.
Web Components: The Custom Elements specification requires custom element names to include a hyphen — making kebab-case mandatory. <user-card> and <nav-menu> are valid; <usercard> is not.
Tailwind CSS: Tailwind's entire utility class API uses kebab-case — bg-blue-500, text-xl, rounded-full, flex-col, hover:opacity-75.
Conclusion
kebab-case is the case format of the web. If you're writing CSS, building URLs, publishing npm packages, or using HTML data attributes, you're using kebab-case — often without thinking about it. The hyphen is the web's separator of choice because URL parsers and CSS parsers both accept it, making kebab-case the naturally correct format for everything web-facing.
Free Tool
Try the kebab-case Converter