camelCase vs snake_case vs kebab-case: When to Use Each

Every developer eventually picks the wrong case for an identifier and pays for it later. JavaScript code with snake_case variables looks foreign to anyone who reads JS. Python code with camelCase fails the linter. CSS classes in PascalCase don't follow the conventions of any major framework. URL slugs with underscores get parsed wrong by Google.

The conventions exist for a reason. Each case style works in a specific context, and using the wrong one creates friction every time the next developer reads your code. This is the cheat sheet — when to use which, and why.

The five cases

The case converter swaps between any two of these in one click — paste the input, click the target case, copy.

camelCase: when to use it

camelCase is the variable and method naming convention for JavaScript, Java, Swift, Kotlin, and most languages descended from Java's stylistic lineage. The first word starts lowercase; subsequent words capitalize their first letter, no separators.

// JavaScript — camelCase variables and functions
const userEmail = "alex@example.com";
function fetchUserData(userId) { ... }

// Java — same convention
String userEmail = "alex@example.com";
public void fetchUserData(int userId) { ... }

Use camelCase for: local variables, function names, method names, instance variables (in languages without separate conventions), JSON keys when targeting JavaScript clients (though many APIs use snake_case for cross-language compatibility), and React component props.

PascalCase: when to use it

PascalCase is camelCase with the first letter also capitalized. It's reserved for "type-like" identifiers — things that represent a category or template rather than a specific value.

// TypeScript class and interface
class UserAccount { ... }
interface ProfileSettings { ... }

// React component (always PascalCase, no exceptions)
function UserCard({ user }) {
  return <div>...</div>;
}

// C#, Java type names
public class CustomerService { ... }

Use PascalCase for: class names, type names, interface names, React/Vue/Svelte components, enum values in some languages, and file names for component files (e.g., UserCard.tsx).

The reason React enforces PascalCase for components is mechanical: JSX uses lowercase identifiers (div, span) for HTML tags and capitalized identifiers for component references. Using camelCase for a component would make JSX think you meant an HTML tag.

snake_case: when to use it

snake_case is the variable and function naming convention for Python, Ruby, Rust, and traditionally for SQL. Words are lowercase, separated by underscores.

# Python
user_email = "alex@example.com"
def fetch_user_data(user_id): ...

# Ruby
user_email = "alex@example.com"
def fetch_user_data(user_id) ...

# SQL — table and column names
CREATE TABLE user_accounts (
  user_id INTEGER PRIMARY KEY,
  email_address VARCHAR(255)
);

Use snake_case for: variables and functions in Python, Ruby, and Rust; database column and table names (case-insensitive in most SQL dialects but conventionally lowercase); JSON keys when serving polyglot API consumers (Stripe and many other major APIs use snake_case); and environment variable names with the SCREAMING variant.

kebab-case: when to use it

kebab-case is lowercase words separated by hyphens. It's the convention for any identifier that lives in a URL or HTML/CSS context.

<!-- URL -->
https://example.com/blog/my-blog-post

<!-- HTML attributes -->
<div data-user-id="42" aria-labelledby="user-name-label">

/* CSS class names */
.btn-primary { ... }
.user-card-header { ... }

Use kebab-case for: URL paths and slugs, file names for static assets (main-stylesheet.css, logo-dark.svg), HTML data-* attributes, ARIA attributes, CSS class names (BEM naming uses kebab-case throughout), and Web Component tag names (which are required to contain a hyphen).

kebab-case in URLs is especially important for SEO. Google parses hyphens as word boundaries; underscores as word joiners. Full breakdown of why →

SCREAMING_SNAKE_CASE: constants and environment variables

All-uppercase snake_case is universally used for constants and environment variables across nearly every language.

// JavaScript constant
const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";

# Python constant
MAX_RETRY_COUNT = 3
API_BASE_URL = "https://api.example.com"

# Shell environment variable
export DATABASE_URL=postgres://...
export STRIPE_SECRET_KEY=sk_live_...

Use it for: any value treated as immutable; environment variables (always SCREAMING_SNAKE); enum values in many style guides; and "magic" constants extracted from inline values.

The decision framework

When you're naming a new identifier, ask:

1. Is this in a URL or HTML/CSS context? kebab-case.
2. Is this a constant or environment variable? SCREAMING_SNAKE_CASE.
3. Is this a class, type, or component? PascalCase.
4. Is this a Python/Ruby/Rust/SQL identifier? snake_case.
5. Is this a JavaScript/Java/Swift identifier? camelCase.
6. Is this a JSON key? Match the case style of the API consumer (camelCase for JS-heavy, snake_case for polyglot).

Common mistakes

Mixing cases inside a single project

Pick one convention per language and stick to it. Mixed-case identifiers across files create confusion and slow down code review.

Using camelCase in URLs

/userProfile creates duplicate-content risk on case-sensitive servers, looks unusual to users, and dilutes the SEO benefit hyphens provide. Always kebab-case URLs.

Using kebab-case in JavaScript

Variable names can't contain hyphens in JavaScript (the parser reads my-var as my minus var). Don't try.

Using snake_case for React components

JSX requires components to start with a capital letter. my_component won't render — JSX treats it as an unknown HTML tag.

The 30-second rule

If you can't decide between two cases, use the one that matches the surrounding code. If you're naming something new in a Python codebase, snake_case. In a React codebase, camelCase for variables and PascalCase for components. In a CSS file, kebab-case. The conventions exist so you don't have to think about them.

For the AI-output workflow that converts case (and a dozen other cleanup operations), see Text Tools for the AI Era.