CamelCase is everywhere in programming — but so are its relatives PascalCase, snake_case, and kebab-case. This guide explains each convention, which languages use them, and when to use which.
CamelCase (also written camel case or camelCase) is a naming convention where multiple words are concatenated without spaces, and each word except the first starts with a capital letter. The name comes from the "humps" formed by the capital letters — like a camel's back.
Examples: myVariable, getUserData, firstName, isLoggedIn
There are two variants of camelCase in widespread use:
The first word is entirely lowercase; each subsequent word starts with a capital letter. This is what most developers mean when they say "camelCase".
myVariablegetUserByIdisEmailValidtotalPriceWithTaxUsed for: variables, functions, and method names in JavaScript, Java, Swift, Kotlin, TypeScript, and C#.
Every word, including the first, starts with a capital letter. Also called PascalCase because it was popularized by the Pascal programming language.
MyVariableGetUserByIdUserProfilePageShoppingCartControllerUsed for: class names, constructor functions, React components, C# namespaces, and TypeScript interfaces.
snake_case uses all lowercase letters with underscores separating words. It is the opposite approach to camelCase's capitalization strategy.
| Concept | camelCase | snake_case |
|---|---|---|
| User ID variable | userId | user_id |
| Get user function | getUser() | get_user() |
| Is valid flag | isValid | is_valid |
| First name field | firstName | first_name |
Use camelCase in: JavaScript, TypeScript, Java, Swift, Kotlin, C#
Use snake_case in: Python, Ruby, PHP (variables), SQL column names, file names in many projects
kebab-case (also called spinal-case or hyphen-case) uses all lowercase words joined by hyphens. It is named for the resemblance to food on a skewer.
| Concept | camelCase | kebab-case |
|---|---|---|
| CSS class | (not used) | user-profile-card |
| URL slug | (not used) | getting-started-guide |
| File name | userProfile.js | user-profile.js |
| HTML attribute | data-userId | data-user-id |
Important: Kebab-case cannot be used as variable names in most programming languages because the hyphen is treated as a subtraction operator. It is primarily used in CSS, HTML, URLs, and file names.
| Convention | Example | Where used |
|---|---|---|
| camelCase | getUserData | JS/TS variables & functions, Java, Swift |
| PascalCase | GetUserData | Classes, React components, C# methods |
| snake_case | get_user_data | Python, Ruby, SQL, PHP variables |
| kebab-case | get-user-data | CSS, HTML, URLs, file names |
| SCREAMING_SNAKE_CASE | MAX_RETRY_COUNT | Constants in most languages |
Consistent naming conventions make code easier to read, search, and maintain. When every developer on a team follows the same convention, there is no ambiguity about whether a function should be called getUser, get_user, or GetUser. Most linters and formatters (ESLint, Prettier, Black, RuboCop) can automatically enforce naming conventions as part of your CI/CD pipeline.
Need to convert text between naming conventions? Try our Case Modify tools — including uppercase, lowercase, and text transformation tools that work directly in your browser.
CamelCase is a naming convention where words are joined without spaces, and each word after the first starts with a capital letter: myVariableName. It is one of the most widely used naming conventions in JavaScript, Java, Swift, and TypeScript.
In camelCase the first word is lowercase (myClass); in PascalCase every word starts with a capital (MyClass). PascalCase is typically used for class names; camelCase for variables and functions.
The JavaScript community convention (and the ECMAScript specification) uses camelCase for variables and functions. Use camelCase in JavaScript and TypeScript projects unless your team's style guide specifies otherwise.
Technically yes, but it is strongly discouraged. CSS convention is kebab-case for class names and IDs (.user-profile-card). HTML attributes and custom data attributes also use kebab-case (data-user-id). CamelCase in CSS can cause confusion and break cross-browser compatibility in some edge cases.
Related articles: What is Title Case? • Uppercase vs Lowercase • What is Sentence Case?