How to convert identifiers to kebab-case for CSS and URLs

CSS custom properties, HTML data attributes, URL slugs, and npm package names all use kebab-case (words-separated-by-hyphens). When you name a CSS variable based on a JavaScript constant, or create a URL slug from a title, you need to convert to kebab-case. This guide shows how to convert from any naming convention to kebab-case in one step.

Step-by-step guide

1. Paste the source identifier or phrase: Enter the identifier in any format — camelCase, snake_case, PascalCase, or a plain phrase like 'My Component Name'.
2. Select kebab-case: Choose 'kebab-case'. All words are lowercased and joined with hyphens.
3. Use in CSS, HTML, or URLs: Copy the result for use as a CSS custom property (--my-component-name), an HTML data attribute (data-component-name), or a URL slug (/my-component-name).

Frequently asked questions

What is the difference between kebab-case and COBOL-CASE?

Both use hyphens as separators. kebab-case is all-lowercase; COBOL-CASE is all-uppercase. COBOL-CASE is rarely used outside legacy systems and some HTTP header conventions (Content-Type uses Title-Case, but some older headers used COBOL-CASE).

Can I use kebab-case in JavaScript variable names?

No. Hyphens are not valid in JavaScript identifiers because they are the subtraction operator. Use camelCase for JavaScript variables and kebab-case only for CSS properties, HTML attributes, file names, and URLs.