Naming convention guide

camelCase vs kebab-case

camelCase removes separators and marks word boundaries with capitals, while kebab-case keeps words lowercase and joins them with hyphens. They often appear at different layers of the same web project.

By Camel Case Converter Editorial TeamPublished Sep 12, 2026Last reviewed Sep 13, 2026

Quick comparison

Difference	camelCase	kebab-case
Example	backgroundColor	background-color
Common use	JavaScript identifiers, object properties, DOM style properties, and application code	URLs, slugs, CSS-oriented names, file names, configuration, and CLI-friendly text
Word separator	None	Hyphen (-)
Capitalization	Internal words capitalized	Usually all lowercase
JavaScript identifier	Yes	Not unquoted
Typical web boundary	Application code	URL/CSS/text name

When to use camelCase

camelCase produces identifiers that can be used directly in JavaScript. For example, background-color becomes backgroundColor in JavaScript style APIs.

When to use kebab-case

kebab-case makes boundaries explicit with hyphens and works well in URLs, slugs, file names, CSS-oriented contexts, and text configuration.

Decision matrix

Context	Recommended convention	Why
JavaScript identifiers and object properties	camelCase	Hyphens are not valid in unquoted JavaScript identifiers, while camelCase can be used directly.
URLs, slugs, and many filenames	kebab-case	Hyphens make word boundaries readable without case sensitivity and are common in web-facing names.
CSS property names versus JavaScript style access	kebab-case in CSS, camelCase in JavaScript	CSS uses dashed property names, while DOM and React style APIs expose corresponding camelCase names.
Custom element names	Hyphenated name	Custom-element names require a hyphen, so a kebab-like spelling matches the platform constraint.

Which naming style should you choose?

Use camelCase for JavaScript-style identifiers and kebab-case where a hyphenated external name is expected. Convert at the boundary instead of forcing one style everywhere.

Common mistakes to avoid

Do not blindly camelize CSS custom properties such as --brand-color; the leading -- name is semantic and case-sensitive.
Do not use kebab-case as an unquoted JavaScript variable name because the parser reads the hyphen as subtraction.
Do not assume URL or file naming rules automatically apply to identifiers inside source code.

Convert between naming styles

Paste an identifier below to see the target format and every supported developer naming style. Conversion runs locally in your browser.

Preserve acronyms

InputDetected: snake_case

kebab-case output

user-profile-image-url

All naming formats

camelCase

userProfileImageUrl

PascalCase

UserProfileImageUrl

snake_case

user_profile_image_url

kebab-case

user-profile-image-url

CONSTANT_CASE

USER_PROFILE_IMAGE_URL

dot.case

user.profile.image.url

path/case

user/profile/image/url

Conversion happens locally in your browser. Your input is not sent to a conversion server.

Related tools and guides

Camel Case → Kebab Case Kebab Case → Camel Case CSS Property → camelCase Kebab Case Converter Snake Case → Kebab Case Kebab Case → Snake Case