What is Kebab Case? | Generated by AI
Question: What is kebab case?
Answer:
Kebab case (also called kebab-case, kebab style, or dash case) is a naming convention where:
- Words are written in lowercase
- Words are separated by hyphens (
-)
Examples:
my-variable-name
user-profile-picture
api-key-secret
dark-mode-toggle
get-user-by-id
background-color-red-500
Comparison with other common naming conventions
| Naming style | Example | Description | Common usage |
|---|---|---|---|
| kebab-case | user-profile-picture | lowercase + hyphens | CSS classes, HTML attributes, URLs |
| snake_case | user_profile_picture | lowercase + underscores | Python, Ruby, Rust, PostgreSQL |
| camelCase | userProfilePicture | first word lowercase, others capitalized | JavaScript variables, JSON keys |
| PascalCase | UserProfilePicture | every word capitalized | Java, C#, TypeScript class names |
| SCREAMING_SNAKE_CASE | USER_PROFILE_PICTURE | uppercase + underscores | Constants, environment variables |
Where kebab-case is most commonly used (2025–2026)
- CSS class names and IDs
.card-header-title { … } .is-active { … } - HTML data attributes
<div data-user-id="123" data-created-at="2025-01-01"></div> - URL slugs
https://example.com/blog/how-to-learn-rust-in-2026 - Many modern CSS-in-JS libraries & utility-first frameworks
(Tailwind CSS, UnoCSS, Panda CSS, etc.) - Git branch names (very common pattern)
feature/add-dark-mode-toggle
Quick memory tip:
Think of a real kebab — pieces of meat separated by sticks → words separated by dashes.
References:
- None needed (this is standard programming terminology)