Camelcase snake case kebab case

camelCase vs snake_case vs kebab-case is mostly a question of where the name lives. JavaScript and Java use camelCase (firstName), Python, Ruby and SQL use snake_case (first_name), and CSS, HTML attributes and URLs use kebab-case (first-name). Follow the language's convention and your team's style guide. To switch text between cases, the free case converter and the free URL slug generator cover most of the work in your browser.

camelCase vs snake_case vs kebab-case at a glance

Style	Example	Where you'll see it
camelCase	userFirstName	JavaScript and TypeScript variables and functions, Java methods, JSON from many web APIs
PascalCase	UserFirstName	Class names in most languages, React components, C# methods
snake_case	user_first_name	Python variables and functions, Ruby, SQL column names, many JSON APIs
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	Constants in many languages, environment variables
kebab-case	user-first-name	CSS properties and class names, HTML attributes, URLs, file names, CLI flags

The names come from the shapes: camelCase has humps of capital letters, snake_case lies flat on underscores, and kebab-case words are skewered on hyphens.

Language by language

JavaScript and TypeScript. Variables and functions are camelCase (getUserName), classes and React components are PascalCase (UserCard), and constants are often SCREAMING_SNAKE_CASE (MAX_RETRIES). The language's own built-ins follow this, like getElementById and toLowerCase.

Python. PEP 8, Python's style guide, uses snake_case for functions, variables and module names, CapWords (PascalCase) for classes, and upper case with underscores for constants. Writing getUserName in Python works, but it will look out of place to every Python developer who reads it.

CSS and HTML. CSS properties are kebab-case (background-color, font-size), and most class-naming systems follow suit (.nav-item, .card-title). HTML data- attributes are kebab-case too, and browsers convert them for JavaScript: data-user-id becomes element.dataset.userId. That one line is a neat summary of why both conventions exist.

SQL and databases. Column and table names are usually snake_case (created_at, order_items). Many databases fold unquoted names to one case, so createdAt can quietly become createdat unless you quote it every time. snake_case avoids that.

URLs and file names. Use kebab-case. Google's URL structure guidance recommends hyphens rather than underscores to separate words, because hyphens clearly mark word boundaries. Lowercase also avoids broken links on servers that treat About.html and about.html as different files. See what a URL slug is and our URL slug best practices.

JSON and APIs. There's no single rule. Many JavaScript-centred APIs use camelCase and many Python or Ruby back ends return snake_case. Pick one per API and never mix them in the same response.

Which is easiest to read?

All three are readable once you're used to them. A few practical differences:

• snake_case and kebab-case keep a clear gap between words, which helps with long names and acronyms (html_parser vs htmlParser vs HTMLParser).
• camelCase is shorter and needs no extra characters.
• kebab-case can't be used for variable names in most languages, because user-name reads as user minus name.
• Double-clicking selects a whole snake_case or camelCase name in most editors, but usually stops at hyphens in kebab-case.

The real rule is consistency. A file that mixes userName, user_name and UserName is harder to read than any one style used everywhere.

Converting between cases

You'll need to convert when moving data between layers: a Python API's created_at becoming a JavaScript createdAt, a page title becoming a URL, or a setting name becoming an environment variable.

To kebab-case or snake_case: use the slug generator. Paste the words, one name per line, and choose Hyphens (-) for kebab-case or Underscores (_) for snake_case. It lowercases everything, turns accents into plain letters and drops symbols. It treats any symbol as a word break, so user_first_name becomes user-first-name and back again. It does not split camelCase, though: userFirstName comes out as userfirstname. Put spaces between the words first.

To SCREAMING_SNAKE_CASE. Make the snake_case version in the slug generator, then paste it into the free case converter and click UPPERCASE. Going the other way, lowercase turns MAX_RETRIES into max_retries.

To camelCase or PascalCase. There isn't a one-click button. The quickest route: type the words with spaces, click Capitalized Case in the case converter (user first name becomes User First Name), then delete the spaces for PascalCase and lowercase the first letter for camelCase.

Many names at once, inside code. For a large rename, use your editor's find-and-replace with a regular expression. Test the pattern first in the free regex tester: for example, _([a-z]) finds each underscore followed by a letter, the spot where snake_case would need a capital in camelCase. Many editors can upper-case the captured letter in the replacement; check your editor's documentation for the syntax.

Things to watch when converting

• Acronyms. Decide whether it's userId or userID, HtmlParser or HTMLParser, and stick with it.
• Numbers. address_line_2 converts cleanly; addressLine2 is fine; just don't drop the digit.
• Public names. Renaming a JSON field or URL breaks whoever uses it. Add a redirect for URLs and keep old field names working for a while in APIs.

Convert your text

Use the free case converter for UPPERCASE, lowercase and Capitalized Case, and the slug generator for kebab-case and snake_case. Both run in your browser, and nothing you paste leaves your device.