/ˈkɛb.æb keɪs/
noun — “the naming style where words are politely skewered together with hyphens and served lowercase.”
Kebab-Case is a naming convention where words are written in lowercase and separated by hyphens (-). The hyphens act as visible word boundaries, making identifiers easy to read even at a glance. This style is especially common in URLs, file names, CSS classes, and configuration keys, where spaces are not allowed and clarity is critical. Unlike camelCase, kebab-case favors explicit separation over capitalization, trading compactness for immediate readability.
In web development, Kebab-Case is practically a native language. HTML attributes, CSS class names, and many framework conventions rely on it because hyphens are well-supported, visually clear, and predictable. It pairs naturally with Naming Convention and Variable Naming rules, especially in environments where identifiers must also be human-readable, shareable, or exposed publicly, such as URLs or configuration files.
Kebab-case also plays nicely with tooling, automation, and Code Quality practices. Because everything is lowercase and explicitly separated, there’s less ambiguity when parsing, searching, or transforming identifiers. During Code Review, kebab-case identifiers tend to read more like natural language, reducing cognitive load for reviewers who aren’t deeply familiar with the codebase.
In practice, kebab-case shines in places where identifiers are meant to be seen, typed, or shared by humans rather than manipulated directly in code logic. A few real-world examples make its strengths obvious:
// CSS class names
.main-navigation
.user-profile-card
.is-active
// HTML attributes
data-user-id="12345"
aria-label="close-menu"
// URLs and routes
https://example.com/user-profile/settings
https://api.example.com/v1/order-history
// Configuration keys
max-upload-size=1048576
enable-dark-mode=trueKey considerations when using Kebab-Case include environment compatibility and consistency. Some programming languages treat hyphens as subtraction operators, making kebab-case unsuitable for variables or function names in those contexts. As a result, teams often reserve kebab-case for CSS, URLs, file names, and configuration, while using camelCase or PascalCase in application code.
Kebab-Case is like labeling drawers with full words instead of abbreviations: nothing is hidden, and everyone knows exactly what’s inside.
See Naming Convention, Variable Naming, camelCase, PascalCase, snake_case.