Convertidor a kebab-case: herramienta de formato para CSS y URL
Transforma al instante cualquier texto al formato *kebab-case*. Ya sea que estés nombrando clases CSS, creando *slugs* para URLs o dando formato a IDs HTML, nuestra herramienta convierte automáticamente tu texto al formato *kebab-case* correcto, siguiendo las mejores prácticas de desarrollo web.
Convierte cualquier texto a un formato *kebab-case* válido en tiempo real: pega el nombre de un componente, el título de una página o una variable en cualquier formato y obtén una cadena en minúsculas separada por guiones, lista para CSS o URLs.
Genera una salida segura para URL de forma predeterminada: sin espacios, sin caracteres especiales y sin necesidad de codificación; el resultado puede insertarse directamente en un atributo `href`, una ruta de archivo o una definición de ruta.
Acepta entradas en cualquier formato —camelCase, snake_case, Title Case o texto libre— y las normaliza todas a un formato kebab-case coherente, sin necesidad de una limpieza previa de los datos.
Elimina los caracteres no permitidos en nombres de clases CSS e identificadores HTML (corchetes, barras inclinadas, signos «ampersand»), de modo que el resultado supere las validaciones CSS y las búsquedas de identificadores en el navegador sin necesidad de modificaciones.
Gestiona los acrónimos tratándolos como palabras en minúsculas, siguiendo el comportamiento de los principales frameworks CSS como Tailwind y BEM, los cuales evitan el uso de mayúsculas en los segmentos de los nombres de clase.
Se ejecuta totalmente en el navegador sin límites de tasa, lo que lo hace adecuado para convertir una lista completa de nombres de componentes o rutas en una sola sesión.
Cómo usarlo
Introduce tu texto o el nombre de la clase
Previsualiza tu resultado en kebab-case
Copiar texto listo para la web
Desarrollo web
- Nombres de clases CSS
- IDs de HTML
- Nombres de archivo
- Nombres de los componentes
Estructura de la URL
- Slugs de página
- Rutas de recursos
- URLs amigables para SEO
- Nombres de directorio
Organización del proyecto
- Nombres de repositorio
- Nombres de paquetes
- Archivos de recursos
- Documentación
| Texto original | Resultado |
|---|---|
Main Header | main-header |
user_profile_image | user-profile-image |
Contact Form | contact-form |
Tecnologías web
- CSS
- HTML
- Vue.js
- Sitios estáticos
Herramientas de compilación
- Webpack
- Vite
- Glup
- npm
Al asignar nombres a clases CSS en una arquitectura BEM o *utility-first*, convierte los nombres de tus componentes aquí antes de escribir ningún selector; una base coherente en formato *kebab-case* evita la acumulación de convenciones mixtas que dificulta las búsquedas en hojas de estilo extensas.
Para el enrutamiento basado en archivos de Next.js, Nuxt o Astro, los nombres de los archivos de página deben coincidir con el *slug* en formato *kebab-case* que desees para la URL; convierte aquí los títulos de tus páginas para obtener el nombre de archivo correcto antes de crearlo.
Por convención del registro, los nombres de los paquetes npm deben escribirse en formato *kebab-case* y totalmente en minúsculas; utiliza esta herramienta al nombrar un nuevo paquete para evitar errores de publicación causados por letras mayúsculas o guiones bajos.
En Vue y Svelte, los nombres de archivo de los componentes personalizados suelen escribirse en PascalCase, pero al usarlos como etiquetas HTML se emplea kebab-case; convierte aquí el nombre de tu componente en PascalCase para obtener la etiqueta correcta en kebab-case que utilizarás en las plantillas.
Para los nombres de repositorios de GitHub y las etiquetas de imágenes de Docker, el *kebab-case* es la convención ampliamente aceptada; su uso evita la engorrosa codificación de URL que los espacios y los guiones bajos a veces provocan en diversas herramientas.
Mantén los slugs en formato *kebab-case* cortos y descriptivos: rutas de URL como `/blog/how-to-use-git-rebase` son legibles tanto para humanos como para motores de búsqueda, mientras que `/blog/htugrebase` sacrifica la claridad total a cambio de ahorrar unos pocos caracteres.
Evita los guiones consecutivos en los nombres de clases CSS y en las URLs, ya que pueden confundir tanto a los analizadores de CSS como a los normalizadores de URLs, además de indicar una conversión descuidada a partir de entradas con múltiples separadores adyacentes.
Haz coincidir la convención de nombres de tu sistema de archivos con la de tus URL: si tus rutas utilizan *slugs* en formato *kebab-case*, los archivos de los componentes de página deberían seguir el mismo patrón para mantener sincronizados los listados de directorios y las configuraciones de rutas.
En el caso de los paquetes npm, consulta el registro para ver si ya existen paquetes con el nombre en formato *kebab-case* que has elegido antes de publicarlo; el registro no distingue entre mayúsculas y minúsculas al realizar búsquedas, pero conserva el formato original, por lo que los nombres similares pueden generar confusión.
En Tailwind CSS, los nombres de las clases de utilidad personalizadas en la configuración deben seguir el formato *kebab-case* para coincidir con las convenciones de Tailwind; mezclar utilidades personalizadas en *snake_case* o *camelCase* con las integradas de Tailwind provoca un comportamiento inconsistente en el autocompletado de la mayoría de los editores.
Preguntas frecuentes
Encuentra respuestas a las preguntas más comunes sobre nuestras herramientas y servicios.
Entender kebab-case
El término *kebab-case* proviene de la imagen visual de palabras unidas por guiones, como los ingredientes en una brocheta de kebab. Esta convención de nomenclatura se consolidó como la predominante para las URL web y los nombres de clases CSS a principios de la década de 2000, impulsada en parte por las notas de diseño de URL de Tim Berners-Lee, que recomendaban el uso de palabras en minúsculas separadas por guiones para facilitar la legibilidad. La especificación de CSS ha permitido el uso de guiones en los identificadores desde la versión CSS1, y la convención se vio reforzada por metodologías como OOCSS y BEM, que se generalizaron alrededor de 2010.
El uso diario más frecuente consiste en escribir nombres de clases CSS y sobrescrituras de utilidades de Tailwind. Cuando un diseñador entrega un componente con nombres como "Primary Action Button" o "Card Header Image", esas etiquetas deben convertirse en selectores CSS válidos. Pega aquí la lista de etiquetas, conviértelas a *kebab-case* y pégalas directamente en tu hoja de estilos o en la propiedad `className` de JSX. La conversión también detecta casos particulares, como el uso accidental de *camelCase* al copiar el nombre de una variable, lo cual generaría una clase que solo funcionaría con selectores entre comillas.
Un segundo uso frecuente es la generación de *slugs* para URLs. Los títulos de artículos de blog, los nombres de productos y los encabezados de páginas de documentación deben convertirse en rutas de URL limpias. Un título como «Getting Started with Next.js 14 & App Router» debe transformarse en «getting-started-with-nextjs-14-app-router», eliminando los caracteres especiales y normalizando los guiones. Esto es importante para el SEO: el rastreador de Google interpreta los guiones como separadores de palabras, por lo que un *slug* bien formado en formato *kebab-case* favorece la coincidencia de palabras clave para cada término del título.
Sin un conversor, los desarrolladores suelen utilizar una única línea de código: `title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')`. Esto funciona con entradas ASCII simples, pero falla silenciosamente con caracteres acentuados (é, ü, ñ), rayas (em-dashes) y comillas tipográficas copiadas de procesadores de texto. Tampoco normaliza las secuencias de guiones resultantes de caracteres no alfanuméricos consecutivos. Esta herramienta gestiona esos casos límite de manera consistente.
El formato *kebab-case* es obligatorio o una convención muy extendida en: nombres de clases e identificadores (ID) de CSS (universal), nombres de etiquetas de elementos personalizados de HTML (requisito de la especificación: deben incluir un guion), *slugs* de URL para rutas optimizadas para SEO, nombres de paquetes npm (convención del registro), uso de etiquetas de componentes de Vue y Svelte en plantillas, nombres de cabeceras HTTP (*Content-Type*, *Authorization*, *X-Request-Id*) y nombres de archivos en la mayoría de los generadores de sitios estáticos, incluidos Jekyll, Hugo y Eleventy. No es válido en declaraciones de variables de JavaScript ni en identificadores de Python, donde los guiones se interpretan como una operación de resta.