Naming conventions matter more than most developers think. They affect readability, cross-language compatibility, and how quickly new contributors can understand your codebase. Here's a complete guide to every major case format and when to use each.
The Core Formats
camelCase
Words joined together; each word after the first starts with a capital letter. The first word is lowercase.
``
firstName, totalAmount, getUserById, isLoggedIn
`
Use in: JavaScript variables and function names, TypeScript, JSON property keys, Java method names, C# local variables.
PascalCase (UpperCamelCase)
Like camelCase, but the first word also starts with a capital letter.
<code>
<p>UserProfile, ShoppingCart, GetUserById, ProductService</p>
</code>
Use in: Class names (all OOP languages), React components, TypeScript interfaces and types, Java/C# type names, Go exported identifiers.
snake_case
All lowercase, words separated by underscores.
<code>
<p>first_name, total_amount, get_user_by_id, is_logged_in</p>
</code>
Use in: Python variables, functions, and modules (PEP 8 standard), database column names (SQL convention), Ruby, C/C++ variables and functions.
kebab-case
All lowercase, words separated by hyphens.
<code>
<p>first-name, main-content, hero-section, user-profile</p>
</code>
Use in: CSS class names and IDs, URL slugs, HTML attributes, file names in web projects (component files in Vue, Svelte).
CONSTANT_CASE (SCREAMING_SNAKE_CASE)
All uppercase, words separated by underscores.
<code>
<p>MAX_RETRY_COUNT, API_BASE_URL, DEFAULT_TIMEOUT_MS</p>
</code>
Use in: Constants in Python, Java, C/C++, and Go, environment variable names, configuration keys.
UPPER CASE
All words capitalised with spaces preserved.
<code>
<p>HELLO WORLD</p>
</code>
Use in: Headings for emphasis, acronyms (HTML, CSS, API), button text in some design systems, legacy COBOL/SQL.
By Language: Quick Reference
| Language | Variables | Classes | Constants | Files |
|---|---|---|---|---|
| JavaScript | camelCase | PascalCase | CONSTANT_CASE | kebab-case |
| Python | snake_case | PascalCase | CONSTANT_CASE | snake_case |
| Java | camelCase | PascalCase | CONSTANT_CASE | PascalCase |
| Go | camelCase (unexported) | PascalCase (exported) | PascalCase | snake_case |
| Ruby | snake_case | PascalCase | CONSTANT_CASE | snake_case |
| C# | camelCase (local) | PascalCase | PascalCase | PascalCase |
| Rust | snake_case | PascalCase | CONSTANT_CASE | snake_case |
| CSS | kebab-case | — | kebab-case | kebab-case |
| SQL | snake_case | PascalCase | UPPER_CASE | snake_case |
The CSS Class Naming Problem
CSS class names technically accept any characters (when properly escaped), but conventions strongly favour kebab-case:
`css
/ ✅ Conventional CSS /
.main-content { }
.btn-primary { }
.hero-section--dark { }
/ ⚠️ Unusual — avoid /
.mainContent { }
.main_content { }
`
The BEM (Block-Element-Modifier) methodology builds on kebab-case: block__element--modifier. For example: card__title--highlighted.
In CSS Modules (React, Vue, Svelte), camelCase is acceptable because class names are transformed at build time — styles.mainContent in JS is fine.
Converting Between Cases
When moving code between languages or refactoring APIs, you often need to convert case formats in bulk. SnappyTools Case Converter converts text to all 9 case formats simultaneously — paste your identifiers, see all formats at once, and copy the one you need.
The Mental Model
Think of it this way:
- Languages with significant whitespace (Python, YAML) use snake_case — it's more legible without IDE support
- C-family languages (Java, C#, TypeScript) use camelCase for local variables, PascalCase for types
- Web presentation (CSS, URLs) uses kebab-case — hyphens are more readable in a URL than underscores
- Environments (shell, .env` files) use CONSTANT_CASE — environment variables shout by convention
Pick the convention for your language, be consistent within a project, and use a case converter when crossing boundaries.
Originally published at https://snappytools.app/case-converter/