Songtov Utility
Back to Blog

Case Conversion for Developers: camelCase, snake_case, kebab-case, and More

A practical naming guide for variables, JSON keys, files, URLs, CSS classes, components, and user-facing labels.

CS
Chiho Song

Software Developer · Songtov Utility

Naming Is a Daily Interface

Developers spend a surprising amount of time translating names between contexts. A product manager writes "account recovery email". A designer labels a component "Account Recovery Email". A frontend developer needs accountRecoveryEmail. A backend API may expect account_recovery_email. A route might use account-recovery-email.

None of these styles is universally correct. The right style depends on where the name will live.

Common Case Styles

camelCase is common in JavaScript variables and object properties. It starts lowercase and capitalizes later words.

PascalCase is common for React components, classes, and TypeScript type names. Every word starts uppercase.

snake_case is common in SQL, Python, analytics schemas, and many APIs. Words are lowercase and separated with underscores.

kebab-case is common in URLs, CSS class names, file names, and package names. Words are lowercase and separated with hyphens.

Title Case and sentence case are mainly for people. They belong in headings, labels, documentation, and marketing copy.

How Bugs Happen

Naming bugs often appear at system boundaries. A frontend sends userId, but a backend expects user_id. A CSS class uses profile-card, but the test selector looks for profileCard. A docs page says APIKey, while code uses apiKey.

These issues are small, but they waste time because they look like data, styling, or routing problems until someone notices the name mismatch.

Choosing a Convention

Pick the convention that fits the ecosystem. JavaScript code usually reads best with camelCase. React components should stay PascalCase. URLs should be lowercase and hyphenated. Database columns should match the team's database convention, not the frontend convention.

The important part is consistency at the boundary. If the API uses snake_case and the UI uses camelCase, convert deliberately at the edge rather than mixing styles throughout the codebase.

Use the Tool

Use the Case Converter to quickly turn labels, keys, headings, and identifiers into the style you need.

Try it yourself

Use our free Case Converter

Open Case Converter