camelCase vs snake_case vs kebab-case: The Complete Developer Guide

Every developer has had this argument at some point: should the variable be userName, user_name, or user-name? The answer depends on what language, framework, or context you are in. This guide covers every major case format, where each is used, and when to convert between them.

The 6 Main Case Formats

• ▸camelCase — each word after the first is capitalized: firstName, getUserById
• ▸PascalCase (UpperCamelCase) — every word is capitalized: UserProfile, ApiResponse
• ▸snake_case — words separated by underscores, all lowercase: user_name, get_user_by_id
• ▸SCREAMING_SNAKE_CASE — snake_case in all caps: MAX_RETRIES, API_BASE_URL
• ▸kebab-case — words separated by hyphens, all lowercase: user-name, get-user-by-id
• ▸flatcase — no separators, all lowercase: username, getuserbyid (rare, mostly in legacy systems)

camelCase — JavaScript, Java, and APIs

camelCase is the dominant convention in JavaScript, TypeScript, and Java for variables and function names. It is also the default format for most REST API JSON responses and GraphQL fields.

• ▸JavaScript / TypeScript variables: const firstName = "Alice"
• ▸JavaScript function names: function getUserProfile() {}
• ▸React component props: <Button onClick={handleClick} isDisabled={false} />
• ▸JSON API responses: { "userId": 1, "createdAt": "2026-01-01" }
• ▸GraphQL fields: query { userProfile { firstName lastName } }

PascalCase — Classes and Components

PascalCase (also called UpperCamelCase) is universally used for class names and constructor functions — in virtually every language. In React and other component-based frameworks, it is required for component names because the JSX parser uses capitalization to distinguish HTML elements from components.

• ▸JavaScript / TypeScript classes: class UserRepository {}
• ▸React components: function UserCard() {} — must start with capital
• ▸C# everything: class UserService {}, method GetUser()
• ▸Python classes: class UserProfile:
• ▸TypeScript interfaces and types: interface ApiResponse, type UserRole

snake_case — Python, Databases, and Rust

snake_case is the standard in Python (enforced by PEP 8), PostgreSQL column names, and Rust function names. It is also widely used in Ruby, PHP, and C standard library functions.

• ▸Python variables and functions: user_name, get_user_by_id()
• ▸Python module names: user_service.py
• ▸PostgreSQL columns: created_at, user_id
• ▸Rust functions: fn get_user_by_id()
• ▸Ruby methods: def find_by_email

kebab-case — URLs, CSS, and HTML

kebab-case is the standard for URLs, CSS class names, HTML attributes, and file names in web projects. Hyphens are preferred over underscores in URLs because Google treats hyphens as word separators, which is better for SEO.

• ▸URL paths: /tools/case-converter, /blog/camelcase-vs-snakecase
• ▸CSS class names: .btn-primary, .user-card, .nav-link
• ▸HTML custom attributes: data-user-id, aria-label
• ▸npm package names: react-router-dom, next-intl
• ▸File names: user-profile.tsx, api-client.ts

SCREAMING_SNAKE_CASE — Constants and Environment Variables

All-caps snake_case is universally used for constants and environment variables across nearly every language. The capitalization signals "this value does not change at runtime".

• ▸Environment variables: DATABASE_URL, NEXT_PUBLIC_API_KEY
• ▸JavaScript constants: const MAX_RETRY_COUNT = 3
• ▸Python constants (by convention): BASE_URL = "https://api.example.com"
• ▸C / C++ macros: #define BUFFER_SIZE 1024

Quick Reference: Which Case for Which Context?

• ▸JavaScript variables & functions → camelCase
• ▸JavaScript / TypeScript classes, interfaces, React components → PascalCase
• ▸JavaScript constants & env vars → SCREAMING_SNAKE_CASE
• ▸Python variables, functions, modules → snake_case
• ▸Python classes → PascalCase
• ▸Database columns → snake_case
• ▸URL paths & slugs → kebab-case
• ▸CSS classes → kebab-case
• ▸HTML attributes → kebab-case
• ▸npm packages → kebab-case
• ▸File names (JS/TS projects) → kebab-case or PascalCase for components

How to Convert Text Between Cases

When you need to quickly convert a piece of text — say, a database column name to a JavaScript variable, or a sentence to a CSS class — a case converter tool saves time and avoids typos.

1. 1.Open the Case Converter tool (link below)
2. 2.Paste or type your text in the input field
3. 3.Click any format button: camelCase, PascalCase, snake_case, kebab-case, UPPER CASE, lower case, Title Case, or Sentence case
4. 4.The output appears instantly
5. 5.Click Copy to grab the result