Naming things in code looks simple until a project grows. Then suddenly, inconsistent naming starts slowing everyone down. Kebab Case, CamelCase and PascalCase are often treated as style preferences, but in practice, they shape how developers read and reason about code usage in the program. camelCase is used for variables and functions, PascalCase for classes and components, and kebab-case for URLs and CSS.
Understanding when to use each one is less about rules and more about clarity that all can understand.
Quick Cheat Sheet
| Style | Looks like | Use it for |
|---|---|---|
| camelCase | userName | Variables and functions in JavaScript and Java |
| PascalCase | UserAccount | Classes, React components, types (all languages) |
| snake_case | user_name | Variables and functions in Python |
| UPPER_SNAKE_CASE | MAX_RETRIES | Constants in Python, Java and JavaScript |
| kebab-case | user-profile | CSS classes, URLs, file names |
Save this table and you’ll get naming right in most projects. The rest of the post explains why, with examples in JavaScript, Python, Java and CSS.
Syntax vs Semantics in Naming
Syntax refers to how code is written.
Semantics refers to what the code communicates.
In naming conventions, camelCase and PascalCase are syntactic differences. Both are valid and won’t affect how the program runs.
Semantically, they signal intent:
- camelCase usually represents variables or functions
- PascalCase usually represents classes or components
This visual distinction helps developers understand code faster without reading implementation details.
Also Read | Common WordPress Problems
What Is camelCase?
camelCase starts with a lowercase letter, and each new word begins with an uppercase letter.
Examples:
userName totalPrice isAuthenticated
camelCase is commonly used for:
- Variables
- Functions
- Methods
- Object properties
It reads naturally in expressions and works well when chaining logic. In most modern languages, camelCase is the default for anything that performs an action or stores a value.
What Is PascalCase?
PascalCase starts with an uppercase letter, and every new word is also capitalized.
Examples:
UserAccount PaymentService OrderController
PascalCase is typically used for:
- Class names
- Constructors
- React or UI components
- Types and interfaces (in typed languages)
PascalCase signals structure. When developers see it, they expect something that represents a concept, not an operation.
Camel Case vs Pascal Case: When to Use Each
| Use Case | Recommended Style |
|---|---|
| Variables | camelCase |
| Functions / Methods | camelCase |
| Classes | PascalCase |
| React Components | PascalCase |
| Types / Interfaces | PascalCase |
These conventions help code communicate intent visually. You can often tell what a piece of code represents without reading its body.
Language-Specific Expectations
JavaScript and TypeScript
- camelCase for variables, functions, hooks
- PascalCase for classes, components, and types
- UPPER_SNAKE_CASE for constants that never change
const maxItems = 10; // camelCase variable
const API_BASE_URL = "https://api.example.com"; // constant
function calculateTotal(items) { // camelCase function
return items.reduce((sum, item) => sum + item.price, 0);
}
class ShoppingCart { // PascalCase class
addItem(item) { /* ... */ }
}
function UserCard({ userName }) { // PascalCase React component
return <div className="user-card">{userName}</div>;
}
React needs PascalCase for components: a lowercase tag like <userCard /> is treated as a plain HTML element, not your component.
Also Read | JavaScript Naming Conventions
Java
- camelCase for methods and variables
- PascalCase for classes and interfaces
- UPPER_SNAKE_CASE for constants (
static final) - all lowercase for package names, like
com.tekraze.orders
public class OrderService { // PascalCase class
private static final int MAX_ORDERS = 100; // UPPER_SNAKE_CASE constant
private int orderCount; // camelCase field
public double calculateTotal(Order order) { // camelCase method
return order.getPrice() * order.getQuantity();
}
}
Python
Python is the big exception. Its official style guide, PEP 8, uses snake_case for variables and functions instead of camelCase.
- snake_case for variables, functions and modules
- PascalCase for classes
- UPPER_SNAKE_CASE for constants
MAX_RETRIES = 3 # constant
def calculate_total(items): # snake_case function
return sum(item.price for item in items)
class ShoppingCart: # PascalCase class
def add_item(self, item): # snake_case method
self.items.append(item)
If you write calculateTotal in Python, it still runs, but linters like flake8 or Ruff (with naming rules on) will flag it, and it looks out of place to other Python developers.
C# / .NET
- PascalCase for public members and classes
- camelCase for private fields and method parameters
Each ecosystem has its own expectations. Following them makes your code easier for others to understand and maintain.
Common Naming Mistakes
Using PascalCase for functions
function CalculateTotal() { } // Misleading
This looks like a class, not a function.
Using PascalCase for variables
let UserName = "John"; // Confusing
It visually suggests a type or constructor.
Mixing styles without meaning
Inconsistent naming doesn’t break code, but it breaks readability and slows down collaboration.
Also Read | Free Graphic Design Website for Graphic Designers
What Is kebab-case?
kebab-case uses all lowercase letters, with words separated by hyphens.
Examples:
user-profile total-price order-history-page
kebab-case is commonly used for:
- URLs and slugs
- File names
- CSS class names
- HTML attributes
Unlike camelCase and PascalCase, kebab-case is not used inside most programming languages for variables or functions, mainly because hyphens are interpreted as subtraction operators.
Why kebab-case Exists (And Where It Makes Sense)
kebab-case is optimized for readability outside code execution.
- URLs are easier to read and scan
- Search engines prefer hyphen-separated words
- CSS and HTML conventions rely on it heavily
For example, in HTML:
<div class="user-profile-card"></div>
Trying to use kebab-case inside JavaScript variables would break the syntax, but in markup and URLs, it’s the most natural choice.
CSS
CSS is where kebab-case lives. Class names, IDs and custom properties (CSS variables) are usually written in kebab-case.
:root {
--primary-color: #1e88e5; /* kebab-case custom property */
}
.user-profile-card { /* kebab-case class */
background-color: var(--primary-color);
}
Built-in CSS properties are kebab-case too, like background-color and font-size. When you read them from JavaScript, they switch to camelCase: element.style.backgroundColor.
camelCase vs PascalCase vs kebab-case (Quick Comparison)
| Naming Style | Common Usage |
|---|---|
| camelCase | Variables, functions, methods (JS, Java) |
| snake_case | Variables, functions (Python) |
| PascalCase | Classes, components, types |
| kebab-case | URLs, CSS classes, file names |
Each naming style serves a different layer of the stack:
- Logic layer → camelCase
- Structure layer → PascalCase
- Presentation & routing layer → kebab-case
Common Mistake With kebab-case
Using kebab-case where the language doesn’t support it:
let user-name = "John"; // Invalid JavaScript
This is why understanding context matters more than preference when choosing naming conventions.
Also Read | Tailoring Web Design for Niche Markets
Why Naming Conventions Matter in Real Projects
In small scripts, naming style rarely matters. In large codebases, it matters a lot.
Consistent naming:
- Reduces cognitive load
- Makes code easier to scan
- Improves onboarding for new developers
- Supports tooling, linters, and IDEs
Good naming acts as silent documentation. Bad naming creates friction that compounds over time.
Final Recommendation
- Use camelCase when something acts
- Use PascalCase when something represents
- Use kebab-case when something needs to be read by humans or browsers
That simple distinction covers most real-world scenarios. In Python, swap camelCase for snake_case.
FAQ
What is the difference between camelCase and PascalCase?
Only the first letter. camelCase starts lowercase (userName), PascalCase starts uppercase (UserName). Use camelCase for things that act or hold values, and PascalCase for classes and components.
Does Python use camelCase?
Not by convention. PEP 8 recommends snake_case for functions and variables and PascalCase (it calls it CapWords) for classes.
Why can’t I use kebab-case for variables?
Because most languages read the hyphen as a minus sign. user-name means “user minus name”.
Is PascalCase the same as UpperCamelCase?
Yes. Some style guides call PascalCase “UpperCamelCase” and camelCase “lowerCamelCase”.
Conclusion
camelCase and PascalCase are not competing styles. They serve different purposes. When used consistently, they help code communicate meaning without extra comments or explanations.
Follow the conventions of the language and framework you’re using. Consistency will always matter more than personal preference.
