Convert any phrase into kebab-case — all lowercase, words joined by hyphens. Standard for URL slugs, CSS class names, and HTML attribute names.
User Profile Background Color → user-profile-background-color
kebab-case (sometimes called dash-case, hyphen-case, or lisp-case) is a naming convention where words are written in lowercase and joined by hyphens. It's the dominant style for URL slugs, CSS class names, HTML data-* attributes, and most config-file keys.
Search engines treat hyphens as word separators inside URL slugs but treat underscores as connectors — so my-blog-post ranks for "my blog post" while my_blog_post is read as one token. That's why kebab-case is the URL-slug standard regardless of which case style the rest of your codebase uses.
Every URL slug on this site (/word-counter, /typing-test-5-minutes) is kebab-case. SEO best practice: hyphens, not underscores; lowercase only.
BEM, Tailwind, Bootstrap, and most CSS frameworks use kebab-case classes. .btn-primary, .card-header, .is-active.
data-user-id, data-toggle, data-bs-target. These convert to camelCase automatically when accessed via JavaScript's dataset property.
Long-form CLI options use kebab-case: --dry-run, --no-cache, --output-format. Short single-character flags use a single dash: -v.
Modern config formats (YAML, TOML) and most static-site generators (Jekyll, Hugo) prefer kebab-case keys for human-readable file names and front-matter fields.
The hyphens between letters resemble skewers running through pieces of meat on a kebab. The name dates from the early 2010s among JavaScript developers; "dash-case" and "hyphen-case" are older synonyms.
kebab-case for URLs, CSS, and HTML attributes (anywhere a hyphen is allowed but an underscore looks weird). snake_case for variable names in Python/Ruby, database columns, and most code identifiers (where hyphens would be parsed as subtraction).
Yes if used as a variable or property name — JavaScript reads foo-bar as foo minus bar. kebab-case is for strings (CSS class names, URL slugs, HTML attributes) — never for identifiers in code.
Google explicitly recommends hyphens. Hyphens are word separators (so my-page is read as "my page"); underscores are connectors (so my_page is read as "my_page" — one token). For SEO, always use kebab-case URLs.