What Is kebab-case? Definition, Examples, and Usage
4 min read
kebab-case is a naming convention where words are lowercase and separated by hyphens: my-variable-name, background-color, user-profile-page.
Where Is kebab-case Used?
| Context | Example |
|---|---|
| CSS properties | background-color, font-size |
| CSS class names (BEM) | .nav-bar__menu-item |
| HTML attributes | data-user-id |
| URL slugs | /blog/what-is-kebab-case |
| CLI flags | --output-dir, --no-cache |
| npm package names | react-router-dom |
| Lisp/Clojure | get-user-name |
kebab-case vs Other Conventions
| Convention | Example |
|---|---|
| kebab-case | my-variable-name |
| camelCase | myVariableName |
| snake_case | my_variable_name |
| PascalCase | MyVariableName |
Why Can't You Use kebab-case in Most Languages?
The hyphen is an operator (subtraction) in most languages: my-var is parsed as my minus var. That's why kebab-case is limited to contexts where hyphens aren't operators — CSS, HTML attributes, URLs, and config files.
Convert to kebab-case
Use our kebab-case converter to transform any text instantly, or try the case converter hub.