camelCase, snake_case, kebab-case: All Text Case Formats Explained
Text case — how words are capitalised and separated — is one of the most frequently misused formatting conventions in development and content work. Different contexts demand different cases, and understanding which to use where prevents naming errors, broken code, and inconsistent content.
All text case formats
UPPERCASE
All letters capitalised. Used for: constants in most programming languages (MAX_RETRIES), acronyms, legal emphasis, some international conventions. In CSS: text-transform: uppercase.
lowercase
All letters in small case. Used for: URL slugs, CSS class names, HTML attributes, command-line arguments, email addresses, package names in npm.
Title Case
First letter of each significant word capitalised, articles and prepositions lowercase. Used for: page titles, article headlines, button labels, navigation items, H1 and H2 headings in English content.
Sentence case
Only the first letter of the first word capitalised, rest lowercase (except proper nouns). Used for: body text, meta descriptions, form labels, alt text, subtitle text. Sentence case is the standard for most written content outside of headlines.
camelCase
First word lowercase, subsequent words capitalised, no spaces or separators. Example: myVariableName, getUserData, firstName. Used for: JavaScript and Java variable names, JSON property keys, function names in many languages.
PascalCase (UpperCamelCase)
Same as camelCase but the first letter is also capitalised. Example: MyComponent, UserAccount, ReactComponent. Used for: class names, React components, TypeScript types and interfaces, C# methods.
snake_case
All lowercase, words separated by underscores. Example: user_id, first_name, max_retries. Used for: Python variables and function names (PEP 8 standard), database column names, file names in many Unix systems, Ruby.
kebab-case (spinal-case)
All lowercase, words separated by hyphens. Example: background-color, font-size, my-component. Used for: CSS property names, HTML data attributes, URL slugs, npm package names, file names in web projects.
Quick reference table
| Format | Example | Primary use |
|---|---|---|
| camelCase | myVariable | JS/Java variables |
| PascalCase | MyComponent | Classes, React |
| snake_case | user_name | Python, databases |
| kebab-case | font-size | CSS, URLs, HTML |
| UPPER_SNAKE | MAX_RETRIES | Constants |
| Title Case | My Page Title | Headlines, buttons |
Frequently asked questions
What is the difference between camelCase and PascalCase?
camelCase starts with a lowercase letter (myVariable). PascalCase starts with an uppercase letter (MyVariable). In JavaScript, camelCase is used for variable and function names; PascalCase for class names and React component names.
Why does CSS use kebab-case?
CSS was designed before programming naming conventions were standardised. The hyphen was chosen as a word separator because CSS identifiers cannot contain spaces and underscores were not universally supported at the time.
Does case matter in URLs?
Yes — most web servers are case-sensitive. /Blog and /blog are different URLs on Apache and Nginx. Consistently using lowercase for all URLs prevents duplicate content issues and broken links from case mismatches.