Convert Text to kebab-case

Kebab-case Converter for URLs and CSS

Kebab-case is common for CSS property names, CSS custom properties with a two-hyphen prefix, HTML data- attributes, URL slugs, and many CLI flag names. Converting a camelCase component name or a Title Case heading to kebab-case by hand is error-prone when you have many to process.

Where kebab-case is the required format

CSS property names and at-rule names are ident sequences that can include hyphen-minus, and common CSS declarations such as background-color and font-family use hyphenated names¹. CSS custom properties use names with a two-hyphen prefix, such as two-hyphen-example-name, and are referenced with var()². HTML data-* attributes start with data-; MDN recommends lowercase names and shows kebab-case names such as data-test and data-test-abc³. For URLs, Google recommends using hyphens instead of underscores to separate words because they help users and search engines identify concepts⁴. Many command-line tools also expose long options with two leading hyphens, such as dry-run or output-dir⁵.

Why kebab-case is not valid in JavaScript

In JavaScript, a hyphen is the subtraction operator, so my-variable is parsed as subtraction rather than as a single identifier⁶. That is why kebab-case is useful for CSS, HTML attributes, URL paths, and CLI long-option names, but not for JavaScript or TypeScript variable names. The same restriction applies to Python, Java, C#, and virtually every language that uses hyphen as an arithmetic operator. When you need to reference a kebab-case name in JavaScript code, you must use bracket notation: element.style["background-color"] or obj["my-property"] instead of dot notation. The browser's dataset API works around this limitation by automatically converting kebab-case HTML attribute names to camelCase JavaScript properties: data-user-id becomes dataset.userId. CSS custom property access through getPropertyValue and setProperty also requires the exact kebab-case name, including the two-hyphen prefix, because the CSSOM treats custom property names as case-sensitive strings.

Workflow: naming CSS custom properties from a design token list

Design tokens often arrive from design tools as camelCase keys, but CSS custom properties need kebab-case names. When you have a design token export from Figma or a tokens.json file, paste all the token names into this converter, copy the kebab-case output, and add the two-hyphen prefix for each CSS custom property.

From design tokens to :root declarations

Design tokens from Figma or a tokens.json file often use camelCase keys like "colorPrimary", "spacingMd", or "fontSizeBody". CSS custom properties, on the other hand, follow kebab-case naming after the two-hyphen prefix. "colorPrimary" becomes "color-primary", which you then reference with the var() function and the two-hyphen prefix in your stylesheets. CapyToolkit converts each line independently, so a full design token set processes in one pass and gives you the CSS variable names ready to insert into a :root block without manual renaming.

The benefit is a single source of truth for token names. When the design file changes, you regenerate the kebab-case list and the stylesheet variables track it without hand editing each name. You can preview the mapping in CapyToolkit by pasting your token keys and converting them, then checking that every output matches the custom property your CSS already references.

BEM naming methodology and kebab-case class structure in CSS

BEM (Block Element Modifier) is the most widely adopted CSS class naming methodology. All BEM identifiers use kebab-case for multi-word segments, making this converter a direct tool for naming BEM components from camelCase or PascalCase source identifiers. When a team adopts BEM without a consistent kebab-case convention, class names drift into mixed formats that break the pattern matching developers rely on when searching for component styles across a large codebase.

BEM class names follow the pattern block__element-modifier. The block, element, and modifier segments are each kebab-case when they contain multiple words: .navigation-bar, .navigation-bar__menu-item, .navigation-bar__menu-item-active. When you have a camelCase component name from a JavaScript file, paste it into this converter to get the BEM block name before writing the stylesheet. "navigationBar" becomes "navigation-bar", which becomes .navigation-bar as the root class.

Stylelint BEM enforcement

Stylelint's selector-class-pattern rule accepts a regex that every class name must match. A BEM-aware pattern can permit the element delimiter and a modifier suffix while ensuring all segments are kebab-case. Add this rule to your .stylelintrc to catch any class that uses camelCase, underscores outside the BEM delimiter, or uppercase letters. Running Stylelint in CI prevents BEM violations from merging and keeps class names consistent across large stylesheets authored by multiple contributors.

Generating kebab-case slugs for Hugo and Jekyll content paths

Static site generators like Hugo and Jekyll derive URL paths from content file names. File names use kebab-case by convention, and the content path becomes the page URL. Generating kebab-case file names from article titles before creating content files prevents URL mismatches and avoids slug normalization issues after publishing. A title typed with spaces or uppercase letters produces a URL that looks unprofessional and may not match the canonical link you share on social media, which splits search engine signals across two different URLs for the same content.

Hugo expects content files in kebab-case for clean URLs without configuration overrides. A post titled "Getting Started With TypeScript Generics" should use the file name getting-started-with-typescript-generics.md. Paste the title in to hyphenate a title into a clean slug and copy the kebab-case result as the file name. The URL the site generates matches the file name directly, which means no mismatch between what you type in the terminal and what appears in the browser. Getting the name right on the first try saves you from renaming files and updating internal links across a content tree that may already have been indexed.

Jekyll permalink configuration and slug generation

Jekyll derives the slug from the file name by default, stripping the date prefix. A file named 2026-06-01-my-post-title.md produces the slug my-post-title. When you configure custom permalinks with :slug, the value must be kebab-case for readable URLs. Paste your article title into this converter before naming the file and you avoid the common error of a title with spaces or uppercase letters producing an unusable slug. CapyToolkit processes each line independently, so a batch of planned post titles converts in one pass and every planned path follows the same consistent kebab-case convention from the start

When to use this

Use this when generating URL slugs from article titles, naming CSS custom properties from a design token list, or mapping JavaScript variable names to HTML data attributes.

Examples

How to Convert camelCase to snake_case
Best Practices for API Design
Getting Started With TypeScript

how-to-convert-camelcase-to-snake-case
best-practices-for-api-design
getting-started-with-typescript

primaryColor
borderRadius
fontSizeLarge

--primary-color
--border-radius
--font-size-large