What is kebab-case?
kebab-case is a naming convention where words are separated by hyphens (-) and all letters are lowercase. It gets its name from resembling meat on a skewer.
Examples:
user-profile
contact-form
main-navigation
product-details-pageWhen to Use kebab-case
- URLs: Website paths and slugs (example.com/user-profile)
- CSS classes: Class names in stylesheets
- HTML attributes: Custom data attributes
- File names: Especially for web assets
- Git branches: Branch names (feature/user-authentication)
- Package names: npm packages and libraries
Examples in Code
CSS Classes:
.user-profile {
display: flex;
}
.nav-item-active {
color: blue;
}URL Slugs:
https://example.com/blog/getting-started-with-react
https://shop.com/products/wireless-headphonesHTML Attributes:
<div data-user-id="123" data-profile-type="premium">
...
</div>Why Use kebab-case for URLs?
kebab-case is the preferred format for URLs because:
- • SEO-friendly: Search engines can read word boundaries
- • Readable: Easier for humans to parse than underscores
- • Standard: Widely adopted web convention
- • No encoding: Spaces require %20, hyphens don't
- • Professional: Clean, modern appearance
CSS Naming with BEM
kebab-case works perfectly with BEM (Block Element Modifier) methodology:
.navigation-menu { } /* Block */
.navigation-menu__item { } /* Element */
.navigation-menu__item--active { } /* Modifier */Best Practices
- ✓ Always use for URLs and slugs
- ✓ Preferred for CSS class names
- ✓ Great for file names in web projects
- ✓ Keep URLs short and descriptive
- ✓ Use lowercase only
- ✗ Don't use underscores in URLs
- ✗ Avoid special characters except hyphens
- ✗ Don't start or end with a hyphen