camelCase vs PascalCase vs snake_case vs kebab-case: Which Naming Style?

You renamed a field three times this morning. The API returned user_display_name. The React prop wanted userDisplayName. The CSS module used user-display-name. Someone opened a PR that “fixed” everything with Title Case and broke the build.

camelCase vs PascalCase vs snake_case vs kebab-case is not a taste contest. Each style is a contract with a language, a framework, or a URL. Mixing them is how you get silent bugs and awkward code review comments.

This guide runs the same example through all four, maps each style to where it belongs, and links the browser converters that share one tokenizer — so round-trips stay predictable. Nothing uploads. If you already know the target, open camelCase, PascalCase, snake_case, or kebab-case and paste.

Four naming styles at a glance

Same input everywhere:

get HTTP status code

Style	Result	Typical home
camelCase	getHttpStatusCode	JS/TS variables, object keys, JSON fields
PascalCase	GetHttpStatusCode	Classes, React components, types, Go exports
snake_case	get_http_status_code	Python, Ruby, SQL columns, many configs
kebab-case	get-http-status-code	CSS classes, file names, route segments

The tokenizer splits on spaces, underscores, hyphens, dots, and camel “humps,” including acronym boundaries so HTMLParser becomes html + parser rather than one mashed token. That shared split is why converting snake_case to camelCase (or the reverse) does not require a second mental model.

If the paste arrived in shouting caps, run lowercase first only when you need a clean base. For headlines meant for the address bar, skip these four and go straight to Slugify.

camelCase

camelCase (lower camel case) lowercases the first word and capitalizes every word after it. No separators.

Before

user display name
user_display_name
UserDisplayName

After (camelCase)

userDisplayName
userDisplayName
userDisplayName

Use the camel case converter for JavaScript and TypeScript variables, function names, and most JSON keys in web APIs. Skip it for CSS class names, Python identifiers, and public URL paths.

Acronyms still need a glance after a bulk pass. Smart tokenization helps (XMLHttp splits cleanly), but house style for ID vs Id is a team decision the converter cannot invent.

PascalCase

PascalCase (UpperCamelCase, StudlyCaps) capitalizes every word, including the first. Same tokens as camelCase; different first letter.

Before

user profile card

After (PascalCase)

UserProfileCard

Use the PascalCase converter for class names, React and Vue component filenames that match the export, C# types, and Go exported identifiers. Do not use it for ordinary JS variables — that is how UserDisplayName sneaks into a const and fails the style lint.

PascalCase is not Title Case. Title Case keeps small words lowercase for headlines (The Lord of the Rings). PascalCase would never leave of alone inside an identifier. For publication casing, see title case vs sentence case vs capitalized case.

snake_case (and SCREAMING_SNAKE_CASE)

snake_case joins lowercase tokens with underscores. SCREAMING_SNAKE_CASE is the same pattern in uppercase — constants and env vars.

Before

Max Retry Count
getHttpStatus

After (snake_case)

max_retry_count
get_http_status

After (SCREAMING_SNAKE_CASE)

MAX_RETRY_COUNT
GET_HTTP_STATUS

Use the snake_case converter for Python functions and modules, Ruby methods, database columns, and YAML keys that already use underscores. Toggle screaming mode for MAX_RETRY_COUNT-style constants. Prefer camelCase when the consumer is a JavaScript codebase that never saw an underscore by design.

kebab-case

kebab-case (dash-case, param-case) joins lowercase tokens with hyphens.

Before

Primary Button Large
myComponentName

After (kebab-case)

primary-button-large
my-component-name

Use the kebab-case converter for CSS classes, HTML custom elements, many static file names, and path segments that are already identifiers. For a full headline with commas, accents, and punctuation, use Slugify instead — it folds Latin diacritics and strips leftover symbols so the path is safe.

Job	Prefer
CSS module / BEM-ish class	kebab-case
Permalink from a blog title	Slugify
Only fold letter case	lowercase

Which one should you use?

• JS/TS variable or object key → camelCase
• Component, class, or type name → PascalCase
• Python / SQL / config with underscores → snake_case
• Constant or env var → SCREAMING_SNAKE_CASE on the same tool
• CSS class or code-ish file name → kebab-case
• Public URL from a title → Slugify, not camelCase
• Email or paragraph for humans → sentence case or Title Case — not any of these four

Match the room you are in. A single codebase should pick one primary style per kind of symbol and stop arguing per rename.

When the browser converter is faster

Use your editor’s rename refactor when the symbol already exists in a typed project. Use the browser when:

1. You are translating a phrase or spreadsheet column into identifiers.
2. You need the same paste in camelCase, snake_case, and kebab-case for different layers.
3. The text lives in a ticket, Slack paste, or CMS — not yet in the repo.

Realistic path for a feature name that arrived as a product sentence:

1. Optional lowercase if the shouting is uneven.
2. camelCase for the JS field.
3. snake_case for the API or column.
4. kebab-case for the CSS class.
5. Slugify if the same words also need a docs URL.

Ctrl+K / Cmd+K jumps tools; the paste can stay put. Ctrl+Enter / Cmd+Enter copies. Conversion runs in the tab — no account, no server-side processing.

Related reading

• URL paths from titles: slugify for SEO
• Human-readable modes: title case vs sentence case vs capitalized case
• Caps accidents: capital to small letters / Caps Lock fix

Next steps

Open the camel case converter for variables, PascalCase for types and components, snake_case for Python and columns, or kebab-case for CSS and files. Paste once, copy the style that matches the layer.

If the string is a headline for the address bar, skip naming case and use the URL slug generator instead.