What Is kebab-case?

Quick answer: kebab-case writes several words as one lowercase name with a hyphen between each word, so Primary Button Large becomes primary-button-large. The words look skewered on a stick, like pieces of a kebab, which is how the style got its name.

It is also known as dash case, lisp-case and spinal case; with capital letters it becomes COBOL-CASE or, capitalized word by word, Train-Case.

Hyphens are the natural separator anywhere a name is read by people and machines alike: web addresses, CSS class names, HTML attributes and command-line options all use them. Most programming languages cannot, because a hyphen means minus, which is why the same name is written backgroundColor in JavaScript and background-color in CSS. This converter switches any input style into kebab-case and adds two web helpers: a BEM class builder and a file name cleaner.

• 3 Hyphen styles
• __ — BEM elements and modifiers
• .ext File extensions preserved
• 6 Hyphenated formats

How Do You Write a Name in kebab-case?

1. Add the names: One per line, in words, camelCase or snake_case.
2. Keep accents or not: Plain letters are safest for URLs and files.
3. Press kebab-case: Or Title Case for header-style names.
4. Use the result: Copy plain names or a ready CSS or HTML format.

Need other formats too? The case converter covers UPPERCASE, Title Case, and 20 more.

kebab-case Examples

Source	kebab-case	Train-Case
Main Navigation	main-navigation	Main-Navigation
borderRadiusSmall	border-radius-small	Border-Radius-Small
accept_language	accept-language	Accept-Language
Crème Brûlée Recipe	creme-brulee-recipe	Creme-Brulee-Recipe

Where Is kebab-case Used?

Place	Example
CSS classes and IDs	.site-header, #main-content
CSS properties and custom properties	font-size, –brand-color
HTML attributes	aria-label, data-user-id
Web addresses	/blog/how-to-bake-bread
Command-line options	–dry-run, –output-dir
npm packages and repositories	date-picker, my-web-app
Lisp and Clojure	Function names such as string-to-list

Python and SQL prefer underscores; use the snake case converter for them.

Should URLs Use Hyphens or Underscores?

Use hyphens. Google’s guidance on URL structure recommends hyphens to separate words in a web address, because underscores can make words run together when they are interpreted, so how-to-bake-bread is clearer than how_to_bake_bread. Keep the address in lowercase, too, since many servers treat capitals as different paths. kebab-case gives you both in one step; for full page titles, a slug generator can also strip filler words and limit the length.

For full page titles, the URL slug generator also removes filler words and caps the length.

What Is BEM Naming in CSS?

BEM stands for Block, Element, Modifier, a popular convention for naming CSS classes so styles stay predictable on large sites. A block is a standalone component such as search-form; an element is a part of it, joined with two underscores, as in search-form__submit-button; a modifier is a variation, joined with two hyphens, as in search-form__submit-button–disabled. Each part is written in kebab-case, which is why the BEM Class Builder on this page converts whatever you type before assembling the names.

Who Uses a kebab-case Converter?

• Front-end developers: name classes, IDs, and custom properties.
• Designers: turn design token names into CSS variables.
• SEO and content teams: write clean, readable URL paths.
• Tool authors: name command-line flags and options.
• Package maintainers: choose npm and repository names.
• Anyone sharing files: rename photos and documents for the web.

kebab-case Glossary

Hyphen

The short dash between words, the separator used by kebab-case.

BEM

Block, Element, Modifier: a naming convention for CSS classes.

Custom property

A CSS variable whose name starts with two hyphens, such as –gap.

Command-line flag

An option passed to a program, usually written –like-this.

Train-Case

Capitalized words joined by hyphens, used for HTTP header names.

Transliteration

Writing letters such as é as their plain equivalents, such as e.

What Can This kebab-case Tool Do?

Three styles:

kebab, COBOL, and Train.

Plain letters

Accents made web-safe.

Web formats

Selectors, variables, data attributes.

BEM builder

Blocks, elements, modifiers.

File names

Extensions kept, duplicates numbered.

Rename commands

For terminals and PowerShell.

Starting a new component?

Type its block, element, and modifiers and copy every BEM class at once.

Open the BEM Builder

kebab-case Output Not as Expected?

What you see	Why	What to do
An accented letter became plain	Accent conversion is on	Untick it to keep letters such as é
A file got -2 at the end	Two names produced the same result	Rename one source file to tell them apart
A name broke inside an acronym	Capitals were read as word starts	Type the acronym in lowercase first
JavaScript throws an error with the name	Hyphens are minus signs in code	Use camelCase for variables instead

For JavaScript variable names, switch to the camel case converter.

Tips for Hyphenated Names

Name by purpose

button-primary outlasts button-blue when the brand colour changes.

Keep URLs short

Three to five words describe a page well enough.

Avoid double hyphens

Outside BEM modifiers, they look like mistakes.

Stay lowercase

Mixed case in file names causes broken links on some servers.

To lower whole paragraphs without hyphens, use the lowercase converter.

Kebab Case Converter FAQ

What is a kebab case converter?

A tool that writes names in lowercase with hyphens between the words, such as main-navigation.

Why is it called kebab-case?

The hyphens look like a skewer running through the words, like a kebab.

What are other names for kebab-case?

Dash case, lisp-case, and spinal case all describe the same hyphenated style.

camelCase to kebab-case: what changes?

Each inner capital marks a new word, so userProfileCard comes out as user-profile-card.

Can snake_case names become kebab-case?

Underscores count as word breaks, so max_retry_count becomes max-retry-count.

What is COBOL-CASE?

Kebab-case in capital letters, such as MAX-RETRY-COUNT, named after the COBOL language.

What is Train-Case?

Capitalized words joined by hyphens, the style of HTTP headers like Content-Type.

Why can’t JavaScript variables use kebab-case?

A hyphen is the minus operator, so user-name would be read as user minus name.

Should CSS class names be kebab-case?

Yes, it is the most common convention, and CSS properties themselves are written that way.

Are hyphens or underscores better in URLs?

Hyphens. They are the separator Google recommends for words in web addresses.

What does BEM stand for?

Block, Element, Modifier, a CSS naming method using __ for elements and — for modifiers.

How do I write a BEM modifier?

Add two hyphens and the modifier to the block or element, as in card__title–large.

Can I clean up file names for a website?

Yes. The File Name Cleaner hyphenates each name, lowers it, and keeps the extension.

Does the tool rename files on my computer?

No. It only prints new names or rename commands for you to copy and run yourself.

What happens to accents like é?

They become plain letters such as e, unless you switch that option off.

How are duplicate file names handled?

The second and later copies get -2, -3, and so on before the extension.

Can I convert a long list of names?

Yes. Each line of the box is converted on its own.

How do I turn kebab-case back into words?

Press Back to Words to replace the hyphens with spaces.

Is the kebab case converter free?

Yes. Every tool on this page is free and needs no registration.

Is my text stored anywhere?

No. All hyphenation happens locally; your names stay private.

Does it work on tablets and phones?

Yes, the converter and both helpers work with touch screens.

Convert to kebab-case

camelCase → kebab-case

CSS classes, URLs, BEM names, and clean file names. – Start Hyphenating