How to Convert to kebab-case (URLs, CSS and File Names)
kebab-case joins lowercase words with single hyphens, as in user-profile. URL paths, CSS class names, HTML attributes, npm package names and static file names mostly follow it.
Open the tool：kebab-case Converter
When hyphens are the right choice
Building a blog or a multilingual site means turning titles into paths: user profile settings becomes /user-profile-settings/. Typed by hand, one hyphen too many or one left at the end produces // or a trailing dash, and the site goes live with two addresses that analytics and search engines treat as different pages.
The other case is naming a set of CSS classes and files together: product card becomes product-card, and the matching images and icons become product-card-icon. When the stylesheet and the asset directory are renamed in one pass, a single rule is more reliable than checking each name.
- URL paths and slugs such as /user-profile/
- CSS class names, including BEM blocks and elements
- Static file names for images and icons
- npm package names and Git branch names
The rule and three things to check
Split on the boundary between a lowercase letter or digit and an uppercase letter, lowercase everything, collapse runs of non-alphanumeric characters into a single hyphen, then trim hyphens at both ends. So User Profile, user_profile and userProfile all give user-profile with no empty segment in the middle.
Three checks. First, hyphens belong between words only: a--b or a trailing dash means the input already had repeated symbols and needs cleaning. Second, Chinese characters are dropped, so an English slug for a Chinese site needs a translation first. Third, CSS class names cannot start with a digit, so 2col has to become col-2.
- Camel boundaries are split, so userProfile converts correctly
- Repeated symbols merge, but a trailing hyphen can remain
- Chinese is dropped — translate before converting
- CSS classes cannot start with a digit: 2col → col-2
- Avoid double hyphens in a live URL
Why URLs use hyphens, not underscores
This difference has a documented source: Google's search documentation states that hyphens are treated as word separators while underscores are not. So /user-profile can be read as two words, where /user_profile may be read as one. That is also why most CMS platforms produce hyphenated slugs by default.
The limits are worth stating. A hyphen cannot appear in a JavaScript variable name because it parses as subtraction, so such a name only works as a string key: obj['user-name']. At the file-system level hyphens are fine, but case sensitivity varies by platform, and neither hyphens nor underscores need percent-encoding inside a URL.
- Google treats hyphens as separators, underscores not
- No hyphenated JS variables — use obj['x-y']
- Fine as file names, but mind case sensitivity
- Need underscores for Python or SQL? Use the other tool
FAQ
Should URLs use hyphens or underscores?
Prefer hyphens. Google documents hyphens as word separators and does not treat underscores that way, so /user-profile is more likely to be read as two words. Most site builders and CMS platforms also generate hyphenated slugs by default.
Can kebab-case be used as a variable name?
No. Identifiers in JavaScript, Python, Java and most other languages cannot contain hyphens; the parser reads them as subtraction. A hyphenated name only works as a string key, accessed with obj['user-name'], or it has to become camelCase or snake_case before it enters code.
Why does the result contain two hyphens?
Because the input already had repeated separators, as in a - b or a--b, and the collapse leaves boundaries on both sides. The tool makes no semantic judgement, so check the start, the end and any doubled hyphens after converting, and delete them by hand.
Related tool：kebab-case Converter