Guía de convenciones de nombres

camelCase vs kebab-case

camelCase elimina separadores y marca palabras con mayúsculas; kebab-case une palabras minúsculas con guiones. Ambos suelen convivir en distintas capas de un proyecto web.

Por Equipo editorial de Camel Case ConverterPublicado 12 sept 2026Última revisión 13 sept 2026

Comparación rápida

Diferencia	camelCase	kebab-case
Ejemplo	backgroundColor	background-color
Uso habitual	Identificadores JavaScript, propiedades de objeto, estilos DOM y código de aplicación	URLs, slugs, nombres CSS, archivos, configuración y texto CLI
Separador de palabras	Ninguno	Guion (-)
Capitalización	Palabras internas capitalizadas	Normalmente todo minúsculas
Identificador JavaScript	Sí	No sin comillas
Límite web típico	Código de aplicación	URL / CSS / nombre textual

Cuándo usar camelCase

camelCase produce identificadores utilizables directamente en JavaScript; background-color pasa a backgroundColor en APIs de estilo.

Cuándo usar kebab-case

kebab-case hace visibles los límites y encaja en URLs, slugs, archivos, CSS y configuración textual.

Matriz de decisión

Contexto	Convención recomendada	Motivo
Identificadores JavaScript y propiedades de objeto	camelCase	Los guiones no son válidos en identificadores JavaScript sin comillas; camelCase se puede usar directamente.
URL, slugs y muchos nombres de archivo	kebab-case	Los guiones hacen legibles los límites de palabra sin depender de mayúsculas y minúsculas.
Propiedades CSS frente a acceso style en JavaScript	kebab-case en CSS, camelCase en JavaScript	CSS usa nombres con guiones, mientras que las API style del DOM y React exponen los nombres camelCase correspondientes.
Nombres de Custom Elements	Nombre con guion	Los Custom Elements requieren un guion en el nombre, por lo que una forma tipo kebab-case encaja con la restricción de la plataforma.

¿Qué estilo de nombres deberías elegir?

Usa camelCase para identificadores JavaScript y kebab-case cuando se espere un nombre externo con guiones; convierte solo en ese límite.

Errores comunes que conviene evitar

No conviertas a camelCase una CSS custom property como --brand-color; el prefijo -- y el nombre tienen significado.
No uses kebab-case como nombre de variable JavaScript sin comillas: el parser interpreta el guion como resta.
No apliques automáticamente las reglas de URL o archivos a identificadores del código fuente.

Convertir entre estilos de nombres

Pega un identificador para ver el formato objetivo y los estilos compatibles. La conversión se ejecuta en tu navegador.

Conservar acrónimos

EntradaDetectado: snake_case

Salida kebab-case

user-profile-image-url

Todos los formatos de nombres

camelCase

userProfileImageUrl

PascalCase

UserProfileImageUrl

snake_case

user_profile_image_url

kebab-case

user-profile-image-url

CONSTANT_CASE

USER_PROFILE_IMAGE_URL

dot.case

user.profile.image.url

path/case

user/profile/image/url

La conversión ocurre localmente en tu navegador. Tu entrada no se envía a un servidor de conversión.

Herramientas y guías relacionadas

Camel Case → Kebab Case Kebab Case → Camel Case Propiedad CSS → camelCase Kebab Case Converter Snake Case → Kebab Case Kebab Case → Snake Case