What is kebab-case?

kebab-case is a naming convention where multi-word identifiers are written in all lowercase with words separated by hyphens. For example, "user first name" becomes "user-first-name". The name comes from the visual resemblance to food items on a skewer. It is also known as spinal-case, param-case, or lisp-case.

Where is kebab-case used?

kebab-case is the standard convention for URL slugs, CSS class names, HTML attributes, and file names in web development. Frameworks like Angular and Vue use kebab-case for component selectors. It is also required for npm package names, custom HTML element names, and CSS custom properties (variables).

// JavaScript — convert string to kebab-case
function toKebabCase(str) {
  return str
    .replace(/([A-Z])/g, '-$1')
    .replace(/[_\s]+/g, '-')
    .toLowerCase()
    .replace(/^-/, '');
}
toKebabCase('userFirstName');   // 'user-first-name'
toKebabCase('user_first_name'); // 'user-first-name'

# Python — convert string to kebab-case
import re
def to_kebab_case(s):
    s = re.sub(r'(?<!^)(?=[A-Z])', '-', s)
    return re.sub(r'[_\s]+', '-', s).lower()
to_kebab_case('userFirstName')  # 'user-first-name'