What Is kebab-case (Dash-Case)?
kebab-case is a lowercase identifier and slug format where words are separated by single ASCII hyphens (-, U+002D) with all spaces and punctuation removed.
kebab-case (also known as dash-case, hyphen-case, or lisp-case) is a naming convention where all letters are converted to lowercase and separated by hyphens (for example, how-to-build-a-custom-text-editor).
What Regex & Tokenization Rule Does kebab-case Use?
The tokenizer extracts words across spaces, underscores, and camelCase transitions (/(?<=\p{Ll})(?=\p{Lu})/u), then executes words.map(w => w.toLowerCase()).join("-").
- Word Extraction Rule: Alphanumeric sequences
[\p{L}\p{N}]+are isolated and lowercased; non-alphanumeric symbols are stripped. - Worked Before / After Example: Input
How to Build a Custom Text Editor(7 words, 33 characters) → Outputhow-to-build-a-custom-text-editor(1 slug, 33 characters, 5 uppercase letters lowercased, 6 spaces replaced by-).
| Input Format / Transformation Rule | Input Example (Before) | Output Result (After) | Characters Changed (count) |
|---|---|---|---|
| Article Headline → URL Slug | How to Build a Text Editor (26 chars, 6 words) |
how-to-build-a-text-editor (26 chars, 1 slug) |
4 letters lowercased, 5 spaces → - |
| PascalCase Component → CSS Class | FeaturedProductCard (19 chars) |
featured-product-card (21 chars) |
+2 hyphens inserted, 3 letters lowercased |
| snake_case → kebab-case | user_account_settings (21 chars) |
user-account-settings (21 chars) |
2 underscores → 2 hyphens |
| CONSTANT_CASE → CLI Flag | MAX_OUTPUT_TOKENS (17 chars) |
max-output-tokens (17 chars) |
15 letters lowercased, 2 underscores → - |
What Are the Best Uses for kebab-case?
kebab-case is the standard convention for SEO-friendly URL slugs, CSS class names, HTML data-* attributes, npm package names, and CLI flags.
- URL Slugs & SEO: Web addresses require hyphenated, lowercase keywords for optimal search indexing and browser readability.
- CSS & HTML: Standard styling conventions (BEM, utility classes) and custom HTML data attributes (
data-user-id) use kebab-case. - CLI Flags & Configuration: Command line flags (
--output-format) and package names on npm.
Is kebab-case Conversion 100% Client-Side?
Yes—every conversion runs offline in your browser with zero server calls.
Convert thousands of lines instantly without data ever leaving your browser. Works completely offline.
