kebab-case Converter
Convert text to kebab-case — words joined with hyphens, all lowercase.
0 words0 chars
0 words0 chars
What is kebab-case?
kebab-case (also called spinal-case, param-case, or lisp-case) writes words in lowercase separated by hyphens. The name comes from the visual similarity to meat on a kebab skewer.
| Input | kebab-case output |
|---|---|
| hello world | hello-world |
| background color | background-color |
| my awesome blog post | my-awesome-blog-post |
| user profile settings | user-profile-settings |
Where kebab-case is used
- CSS class names and IDs:
.nav-bar,#main-content - HTML attributes:
data-user-id,aria-label - URL slugs:
/blog/my-first-post/ - File names: especially for web assets
- npm package names:
my-package-name - Lisp and Clojure: function and variable names
SEO note: Google recommends using hyphens to separate words in URLs rather than underscores. /my-page/ is treated as "my page"; /my_page/ can be treated as a single word "mypage".
Frequently asked questions
CSS was designed before camelCase conventions became dominant in JavaScript. Hyphens are also semantically natural as word separators in prose (like compound adjectives in English). All CSS properties use kebab-case: background-color, font-size, border-radius.
No. JavaScript (and most languages) don't allow hyphens in variable or function names because the hyphen is the subtraction operator. Use camelCase for JavaScript variables. kebab-case is only valid in CSS class names, HTML attributes, and URLs.