Developer

When to Use camelCase, snake_case, and kebab-case

Published March 15, 2026 · Updated March 17, 2026 · 3 min read

Naming conventions feel like style preferences until you're debugging a bug caused by a case mismatch between a JavaScript object and a JSON key, or an API that expects snake_case but receives camelCase and silently ignores the unknown field.

camelCase

camelCase joins words by capitalising the first letter of each subsequent word: firstName, orderTotal, getUserById.

Use camelCase for:

JavaScript, TypeScript, and Java variable names, function names, and object properties
JSON keys (by convention — JSON itself has no case requirement)
React component props
Most API responses from JavaScript-based backends

// JavaScript (camelCase)
const firstName = "Alice";
const orderTotal = calculateOrderTotal(items);

// JSON (camelCase is conventional for JS-generated APIs)
{"firstName": "Alice", "orderTotal": 42.50}

snake_case

snake_case joins words with underscores: first_name, order_total, get_user_by_id.

Use snake_case for:

Python variable names, function names, and module names (per PEP 8)
Ruby variable and method names
Database column names (most databases)
Environment variables (DATABASE_URL, API_KEY — typically SCREAMING_SNAKE_CASE)
API responses from Python or Ruby backends

# Python (snake_case)
first_name = "Alice"
order_total = calculate_order_total(items)

# Database columns (snake_case)
CREATE TABLE users (
    first_name VARCHAR(100),
    order_total DECIMAL(10,2)
);

kebab-case

kebab-case joins words with hyphens: first-name, order-total, get-user-by-id.

Use kebab-case for:

URL paths: /api/user-profile, /blog/getting-started
HTML element IDs and CSS class names: id="main-content", class="primary-button"
File names in web projects: user-profile.html, main-layout.css
CLI flags: --dry-run, --output-file

The hyphen problem: kebab-case can't be used directly as a JavaScript variable name — const first-name is a syntax error (JavaScript reads the hyphen as minus). This is why HTML/CSS use kebab-case while the JavaScript that manipulates those elements uses camelCase: element.classList.add('primary-button').

Handling mixed contexts

The hardest case is when you have snake_case database columns feeding into a camelCase JSON API. Most frameworks handle this automatically (Django REST Framework, FastAPI, and ActiveRecord all have serialisation settings for case conversion). When they don't, explicit case conversion at the serialisation boundary — one place in the code — is much cleaner than scattered conversions throughout.