Text

camelCase vs snake_case vs kebab-case Explained

Dev Nexus4 min read

A clear breakdown of camelCase, snake_case and kebab-case - what each looks like, where each belongs in code, and how to convert between them.

Every codebase has to answer the same small question thousands of times: how do you join words in a name? Three answers dominate - camelCase, snake_case and kebab-case - and each has become the convention in different corners of software.

This post explains what each one looks like, where it is expected, and why mixing them up causes friction. By the end you will know which to reach for and how to convert between them quickly.

The Problem

The conventions are not interchangeable, and picking the wrong one has real consequences. Write a JavaScript variable as user_name in a codebase that expects userName and it looks out of place; a linter may flag it and reviewers will ask you to change it. Use kebab-case for a variable name in most languages and it will not even parse - the hyphen reads as a minus sign.

The deeper problem is that a single concept often has to travel across systems that each prefer a different style. User Profile Image might be a userProfileImage property in your frontend, a user_profile_image column in your database, and a user-profile-image class in your CSS. Converting between them by hand, over and over, is exactly the kind of tedious work that invites typos.

The Solution

The fix is to know the rule for each convention and to convert mechanically rather than by eye.

camelCase joins words with no separator and capitalises every word after the first: userProfileImage. It is the default for variables and functions in JavaScript, TypeScript, Java and C#. Its cousin PascalCase capitalises the first word too (UserProfileImage) and is used for class and type names.
snake_case joins words with underscores and stays lowercase: user_profile_image. It is standard for variables and functions in Python and Ruby, and for column names in most SQL databases. SCREAMING_SNAKE_CASE is the same idea in caps and is used for constants.
kebab-case joins words with hyphens and stays lowercase: user-profile-image. It is the convention for URLs, CSS class names, HTML attributes and many CLI flags.

Rather than retype a name in three styles, paste it into the Case Converter and switch between them - it runs in your browser, so nothing is uploaded. When the target is a URL, the Slug Generator produces clean kebab-case slugs directly.

Step-by-Step Guide

1
Identify the target context
Decide where the name will live. A JavaScript variable wants camelCase, a Python name or SQL column wants snake_case, and a URL or CSS class wants kebab-case. The context dictates the convention, not personal taste.
2
Use camelCase for code identifiers in curly-brace languages
In JavaScript, TypeScript, Java and C#, name variables and functions in camelCase (totalCount, getUserById) and reserve PascalCase for classes and types (UserAccount).
3
Use snake_case for Python, Ruby and databases
Write variables and functions as total_count and get_user_by_id, and name database columns created_at, user_id. Use SCREAMING_SNAKE_CASE like MAX_RETRIES for constants.
4
Use kebab-case for URLs, CSS and CLI flags
Slugs (/blog/how-to-change-text-case), class names (nav-item--active) and command-line flags (--dry-run) all use hyphens. Never use kebab-case for variable names - the hyphen parses as subtraction.
5
Convert between styles instead of retyping
When the same concept crosses systems, paste the label into the Case Converter and switch styles. This keeps the words consistent and avoids typos that creep in when you retype a name three ways.

Common Mistakes

Using kebab-case for variable names
A hyphen is a minus sign in almost every programming language, so user-name is read as user minus name. Keep kebab-case to URLs, CSS and CLI flags; use camelCase or snake_case for identifiers.
Mixing conventions within one codebase
Having userName in one file and user_name in another makes code harder to scan and search. Follow the language's dominant convention consistently and let a linter enforce it.
Confusing camelCase with PascalCase
camelCase starts lowercase (orderTotal); PascalCase starts uppercase (OrderTotal). Most languages reserve the capitalised form for classes and types, so swapping them sends the wrong signal to readers.
Hand-converting names across systems
Retyping the same concept as camelCase, snake_case and kebab-case invites typos and drift - userId in code but user_ids in the database. Convert mechanically so the underlying words stay identical.

Frequently Asked Questions

What is the difference between camelCase and PascalCase?

Both join words with no separator, but camelCase leaves the first word lowercase (`itemCount`) while PascalCase capitalises it (`ItemCount`). camelCase is used for variables and functions; PascalCase for classes and types.

When should I use snake_case instead of camelCase?

Use snake_case in languages and systems that expect it: Python and Ruby variables and functions, and SQL database column names. Use camelCase in JavaScript, TypeScript, Java and C#. Follow the convention of the language you are in.

Why can't I use kebab-case for variable names?

Because the hyphen is interpreted as a subtraction operator in most languages, so `first-name` is parsed as `first` minus `name`. kebab-case is safe only in contexts like URLs, CSS classes and CLI flags where hyphens are literal.

Which case should I use for a URL slug?

kebab-case. Lowercase words separated by hyphens are the web standard for readable, SEO-friendly URLs (`/how-to-change-text-case`). A slug generator produces this format directly from a title.

How do I convert a name from one convention to another?

Paste the name into a case converter and pick the target style. It splits the words and rejoins them in camelCase, snake_case or kebab-case, keeping the wording identical so you avoid the typos that come from retyping.