Kebab-Case vs. Snake_Case vs. camelCase: The Complete Developer's Guide

Naming conventions feel like a small thing until you're staring at a codebase where half the variables are camelCase and the other half are snake_case. The case style you pick affects how readable your code is, how well your URLs perform in search, and how smoothly your team works together. If you write code, name files, or build APIs, it's worth knowing the difference between kebab-case, snake_case, camelCase, and PascalCase.

This guide covers when and why to use each one, with examples from real codebases and industry style guides.

The four major naming conventions

1. kebab-case (Hyphen-Separated)

Kebab-case separates words with hyphens and keeps everything lowercase:

url-slug-best-practices
my-awesome-component
user-profile-settings
convert-text-to-json

Best used for: URLs, slugs, CSS class names, HTML attributes, file names in web projects, and Git branch names.

2. snake_case (Underscore-Separated)

Snake_case separates words with underscores, usually in lowercase:

user_profile_data
calculate_total_price
database_connection_string
API_SECRET_KEY  # SCREAMING_SNAKE_CASE for constants

Best used for: Python variables and functions, Ruby code, database table and column names, environment variables, and config files.

3. camelCase (First Letter Lowercase)

camelCase capitalizes the first letter of each word except the first one:

userProfileData
calculateTotalPrice
isActiveUser
addEventListener

Best used for: JavaScript and TypeScript variables and functions, Java methods, JSON keys in APIs, and Swift properties.

4. PascalCase (First Letter Uppercase)

PascalCase capitalizes the first letter of every word, including the first:

UserProfile
CalculateTotalPrice
BlogPostLayout
ReactComponent

Best used for: Class names across most languages, React components, TypeScript interfaces and types, and C# namespaces.

When to use each convention

Language-specific conventions

JavaScript/TypeScript Ecosystem

// Variables and functions: camelCase
const userEmail = 'user@example.com';
function calculateTotal() { }

// Classes and components: PascalCase
class UserService { }
const UserProfile = () => { };

// Constants: SCREAMING_SNAKE_CASE or camelCase
const API_ENDPOINT = 'https://api.example.com';
const maxRetries = 3;

// File names: camelCase or kebab-case
// userService.js or user-service.js

Python Ecosystem

# Variables and functions: snake_case
user_email = 'user@example.com'
def calculate_total():
    pass

# Classes: PascalCase
class UserService:
    pass

# Constants: SCREAMING_SNAKE_CASE
API_ENDPOINT = 'https://api.example.com'

# File names: snake_case
# user_service.py

Ruby Ecosystem

# Variables and methods: snake_case
user_email = 'user@example.com'
def calculate_total
end

# Classes and modules: PascalCase
class UserService
end

# Constants: SCREAMING_SNAKE_CASE or PascalCase
API_ENDPOINT = 'https://api.example.com'

# File names: snake_case
# user_service.rb

SEO: why kebab-case wins for URLs

Google's search algorithms handle hyphens and underscores differently:

• Hyphens (kebab-case): Google reads these as word separators. "seo-best-practices" becomes three separate words: "seo," "best," "practices."
• Underscores (snake_case): Google reads these as joiners. "seo_best_practices" becomes a single blob: "seobestpractices."
• No separator (camelCase): Google can't split the words. "seoBestPractices" is meaningless to the crawler.

Takeaway: Use kebab-case for URLs, slugs, and anything that appears in a browser's address bar. This matches Google's own URL structure guidelines.

Common mistakes to avoid

Mistake #1: Using snake_case in URLs

Bad:  /blog/url_slug_best_practices
Good: /blog/url-slug-best-practices

Why it matters: Google won't split the words properly, so you lose search visibility for each individual keyword.

Mistake #2: Mixing conventions in the same context

// Bad: Inconsistent naming
const user_name = 'John';    // snake_case
const userEmail = 'j@x.com'; // camelCase
const UserAge = 30;          // PascalCase

// Good: Consistent camelCase
const userName = 'John';
const userEmail = 'j@x.com';
const userAge = 30;

Why it matters: Inconsistent naming makes code harder to read and slows your team down when they need to remember which style a particular variable uses.

Mistake #3: Using kebab-case for programming variables

// Bad: Won't work (hyphen is minus operator)
const user-name = 'John';  // Syntax error!

// Good: Use language convention
const userName = 'John';   // JavaScript
user_name = 'John'         # Python

Why it matters: Most languages interpret hyphens as the minus operator, so your code won't even run.

Tools for converting between naming conventions

Converting between cases by hand is tedious and easy to mess up, especially with longer strings. These free tools handle it instantly:

How popular frameworks handle naming

Most frameworks have clear opinions here. If you follow their conventions, your code will look familiar to anyone who's worked with that framework before:

• React: PascalCase for components (UserProfile.js), camelCase for props (userName), kebab-case for CSS modules
• Vue.js: PascalCase or kebab-case for components, camelCase for props, kebab-case for filenames
• Angular: PascalCase for classes, camelCase for properties, kebab-case for selectors and filenames
• Django (Python): snake_case for almost everything, PascalCase for classes, kebab-case for URL patterns
• Ruby on Rails: snake_case for methods and variables, PascalCase for classes, kebab-case for routes

Quick decision tree

Are you naming a URL or slug?
  └─→ YES: Use kebab-case

Are you writing JavaScript/TypeScript?
  ├─→ Variable/Function: camelCase
  ├─→ Class/Component: PascalCase
  └─→ Constant: SCREAMING_SNAKE_CASE or camelCase

Are you writing Python/Ruby?
  ├─→ Variable/Function: snake_case
  ├─→ Class: PascalCase
  └─→ Constant: SCREAMING_SNAKE_CASE

Are you naming a CSS class?
  └─→ Use kebab-case

Are you naming a database column?
  └─→ Use snake_case

Are you creating an environment variable?
  └─→ Use SCREAMING_SNAKE_CASE

Consistency matters more than the convention itself

Picking the right convention for each context matters, but consistency within your project matters more. A codebase that uses the "wrong" convention everywhere is easier to work with than one that randomly switches between styles.

A few rules to keep in mind:

1. URLs: Always kebab-case. Google needs it.
2. Code: Follow whatever your language's official style guide says.
3. Databases: snake_case is the standard SQL convention.
4. Enforcement: Set up linters like ESLint or Pylint so you don't have to argue about it in code review.
5. Teams: Write your naming conventions down somewhere. A short style guide saves hours of back-and-forth.

Want to convert text between these formats without doing it by hand? The Kebab Case Converter, Snake Case Converter, and Camel Case Converter handle all the common formats and give you results instantly.