camelCase vs snake_case vs kebab-case: cuándo usar cada uno

Todo desarrollador elige tarde o temprano el estilo equivocado para un identificador y lo paga más adelante. El código JavaScript con variables en snake_case le parece ajeno a cualquiera que lea JS. El código Python con camelCase no pasa el linter. Las clases CSS en PascalCase no siguen las convenciones de ningún framework importante. Los slugs de URL con guiones bajos los interpreta mal Google.

Las convenciones existen por algo. Cada estilo de capitalización sirve en un contexto específico, y usar el equivocado genera fricción cada vez que el siguiente desarrollador lee tu código. Esta es la guía rápida: cuándo usar cuál, y por qué.

Los cinco estilos

Estilo	Ejemplo	Dónde
camelCase	userEmail	Variables y métodos en JavaScript, Java, Swift, Kotlin
PascalCase	UserAccount	Nombres de clase, componentes de React, tipos de TypeScript
snake_case	user_email	Variables en Python, Ruby, Rust; identificadores SQL; columnas de base de datos
kebab-case	user-email	URLs, clases CSS, atributos HTML, nombres de archivo de recursos estáticos
SCREAMING_SNAKE	USER_EMAIL	Constantes en casi todos los lenguajes; variables de entorno

El conversor de mayúsculas cambia entre dos cualesquiera de estos estilos en un clic. Pega la entrada, elige el estilo de destino y copia.

camelCase: cuándo usarlo

camelCase es la convención para nombrar variables y métodos en JavaScript, Java, Swift, Kotlin y la mayoría de los lenguajes que descienden de la estirpe estilística de Java. La primera palabra empieza en minúscula; las siguientes capitalizan su primera letra, sin separadores.

// JavaScript. Variables y funciones en camelCase
const userEmail = "alex@example.com";
function fetchUserData(userId) { ... }

// Java. La misma convención
String userEmail = "alex@example.com";
public void fetchUserData(int userId) { ... }

Usa camelCase para: variables locales, nombres de función, nombres de método, variables de instancia (en lenguajes sin convenciones aparte), claves JSON cuando el destino son clientes JavaScript (aunque muchas APIs usan snake_case por compatibilidad entre lenguajes) y props de componentes de React.

PascalCase: cuándo usarlo

PascalCase es camelCase con la primera letra también en mayúscula. Se reserva para los identificadores «de tipo»: cosas que representan una categoría o una plantilla en lugar de un valor concreto.

// Clase e interfaz en TypeScript
class UserAccount { ... }
interface ProfileSettings { ... }

// Componente de React (siempre PascalCase, sin excepciones)
function UserCard({ user }) {
  return <div>...</div>;
}

// Nombres de tipo en C#, Java
public class CustomerService { ... }

Usa PascalCase para: nombres de clase, nombres de tipo, nombres de interfaz, componentes de React/Vue/Svelte, valores de enumeración en algunos lenguajes y nombres de archivo de componentes (por ejemplo, UserCard.tsx).

El motivo por el que React obliga a usar PascalCase en los componentes es mecánico: JSX usa identificadores en minúscula (div, span) para las etiquetas HTML e identificadores con mayúscula inicial para las referencias a componentes. Usar camelCase en un componente haría que JSX creyera que te referías a una etiqueta HTML.

snake_case: cuándo usarlo

snake_case es la convención para nombrar variables y funciones en Python, Ruby, Rust y, tradicionalmente, en SQL. Las palabras van en minúscula, separadas por guiones bajos.

# Python
user_email = "alex@example.com"
def fetch_user_data(user_id): ...

# Ruby
user_email = "alex@example.com"
def fetch_user_data(user_id) ...

# SQL. Nombres de tabla y de columna
CREATE TABLE user_accounts (
  user_id INTEGER PRIMARY KEY,
  email_address VARCHAR(255)
);

Usa snake_case para: variables y funciones en Python, Ruby y Rust; nombres de columna y de tabla en bases de datos (en la mayoría de los dialectos SQL no distinguen mayúsculas, pero por convención van en minúscula); claves JSON cuando sirves a consumidores de API políglotas (Stripe y muchas otras APIs importantes usan snake_case); y los nombres de las variables de entorno con la variante en mayúsculas.

kebab-case: cuándo usarlo

kebab-case son palabras en minúscula separadas por guiones. Es la convención de todo identificador que vive en una URL o en un contexto HTML/CSS.

<!-- URL -->
https://example.com/blog/my-blog-post

<!-- Atributos HTML -->
<div data-user-id="42" aria-labelledby="user-name-label">

/* Nombres de clase CSS */
.btn-primary { ... }
.user-card-header { ... }

Usa kebab-case para: rutas y slugs de URL, nombres de archivo de recursos estáticos (main-stylesheet.css, logo-dark.svg), atributos data-* de HTML, atributos ARIA, nombres de clase CSS (la nomenclatura BEM usa kebab-case de principio a fin) y nombres de etiqueta de Web Components (que están obligados a contener un guion).

El kebab-case en las URLs importa especialmente para el SEO. Google interpreta los guiones como límites de palabra y los guiones bajos como uniones de palabras. El desglose completo de por qué →

SCREAMING_SNAKE_CASE: constantes y variables de entorno

El snake_case todo en mayúsculas se usa de forma universal para las constantes y las variables de entorno en casi todos los lenguajes.

// Constante en JavaScript
const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";

# Constante en Python
MAX_RETRY_COUNT = 3
API_BASE_URL = "https://api.example.com"

# Variable de entorno en el shell
export DATABASE_URL=postgres://...
export STRIPE_SECRET_KEY=sk_live_...

Úsalo para: cualquier valor tratado como inmutable; las variables de entorno (siempre SCREAMING_SNAKE); los valores de enumeración en muchas guías de estilo; y las constantes «mágicas» extraídas de valores escritos directamente en el código.

El marco de decisión

Cuando vas a nombrar un identificador nuevo, pregúntate:

1. ¿Está en un contexto de URL o HTML/CSS? kebab-case.
2. ¿Es una constante o una variable de entorno? SCREAMING_SNAKE_CASE.
3. ¿Es una clase, un tipo o un componente? PascalCase.
4. ¿Es un identificador de Python/Ruby/Rust/SQL? snake_case.
5. ¿Es un identificador de JavaScript/Java/Swift? camelCase.
6. ¿Es una clave JSON? Usa el estilo de quien consume la API (camelCase para clientes con mucho JavaScript, snake_case para entornos políglotas).

Errores comunes

Mezclar estilos dentro de un mismo proyecto

Elige una sola convención por lenguaje y mantenla. Los identificadores con estilos mezclados entre archivos generan confusión y ralentizan la revisión de código.

Usar camelCase en las URLs

/userProfile crea riesgo de contenido duplicado en servidores sensibles a mayúsculas, le resulta raro al usuario y diluye el beneficio de SEO que dan los guiones. Las URLs siempre en kebab-case.

Usar kebab-case en JavaScript

Los nombres de variable no pueden contener guiones en JavaScript (el analizador lee my-var como my menos var). No lo intentes.

Usar snake_case para componentes de React

JSX exige que los componentes empiecen con mayúscula. my_component no se renderiza: JSX lo trata como una etiqueta HTML desconocida.

La regla de los 30 segundos

Si no logras decidir entre dos estilos, usa el que coincida con el código que lo rodea. Si nombras algo nuevo en un código Python, snake_case. En un código React, camelCase para las variables y PascalCase para los componentes. En un archivo CSS, kebab-case. Las convenciones existen justamente para que no tengas que pensarlo.

Para generar un slug limpio a partir de cualquier título, prueba el generador de slugs de URL.