Skip to main content
FreeToolkit .ai

Convertidor a kebab-case Convierta texto a kebab-case para clases CSS, URL y nombres de archivo.

Convertidor a kebab-case illustration
📝

Convertidor a kebab-case

Convierta texto a kebab-case para clases CSS, URL y nombres de archivo.

1

Introducir texto

Escribe o pega el texto que deseas convertir a kebab-case.

2

Ver resultado

Vea la salida en minúsculas con guiones instantáneamente.

3

Copiar y usar

Copia para clases CSS, URL o nombres de archivos.

Loading tool...

What Is Convertidor a kebab-case?

Un convertidor de kebab-case transforma el texto en formato kebab-case, donde todas las letras están en minúscula y las palabras están separadas por guiones. El kebab-case es la convención de nomenclatura estándar para nombres de clases CSS, atributos HTML, identificadores URL, nombres de paquetes npm y nombres de archivos en muchos marcos de trabajo. Ejemplos: "Hello World" se convierte en "hello-world", "backgroundColor" se convierte en "background-color". El nombre proviene de la semejanza visual de las palabras ensartadas en un guión, como los elementos en un pincho moruno.

Why Use Convertidor a kebab-case?

  • Estándar para nombres de clases CSS y propiedades personalizadas
  • Formato requerido para slugs de URL en la mayoría de los frameworks web
  • Se utiliza para nombres de paquetes npm y nombres de ramas Git
  • Formato más legible para identificadores de varias palabras en contextos web
  • Maneja la conversión desde cualquier formato de entrada

Common Use Cases

Clases CSS

Formatea los nombres de las clases siguiendo las convenciones de nomenclatura BEM o estándar de CSS.

Slugs de URL

Crea rutas de URL amigables para SEO a partir de títulos de página o encabezados de contenido.

Paquetes npm

Formatea los nombres de los paquetes siguiendo la convención kebab-case de npm.

Nombramiento de archivos

Nombra archivos en kebab-case para frameworks basados en componentes como Angular, Vue, etc.

Technical Guide

La conversión a kebab-case sigue el mismo algoritmo de división de palabras que snake_case, pero une las palabras con guiones en lugar de guiones bajos. La entrada se divide en espacios en blanco, guiones bajos, puntos, guiones existentes y transiciones de caso. Todas las palabras se convierten a minúscula y se unen con guiones simples. Los guiones consecutivos se combinan y los guiones principales/finales se eliminan. El algoritmo maneja correctamente la entrada camelCase ("backgroundColor" → "background-color"), PascalCase ("PageTitle" → "page-title") y formatos mixtos. Tenga en cuenta que los identificadores kebab-case no se pueden usar directamente como nombres de variables en la mayoría de los lenguajes de programación porque el guión es el operador de resta.

Tips & Best Practices

  • 1
    Las propiedades CSS son nativamente kebab-case: background-color, font-size, border-radius
  • 2
    La metodología BEM utiliza kebab-case con dos guiones: block__element--modifier
  • 3
    Las URL en kebab-case son preferidas para SEO sobre los guiones bajos o camelCase
  • 4
    En JavaScript, accede a las propiedades kebab-case con notación de corchetes: obj["my-prop"]
  • 5
    Angular utiliza kebab-case para selectores de componentes (app-user-profile)

Related Tools

Convertidor de camelCase - free online tool

Convertidor de camelCase

Convierta texto a camelCase para variables y nombres de funciones de JavaScript.

📝 Text Tools
Convertidor de PascalCase - free online tool

Convertidor de PascalCase

Convierte texto a PascalCase para nombres de clases y denominación de componentes.

📝 Text Tools
Convertidor de snake_case - free online tool

Convertidor de snake_case

Convierta texto a snake_case para variables de Python y columnas de bases de datos.

📝 Text Tools
Convertidor de dot.case - free online tool

Convertidor de dot.case

Convierta texto al formato dot.case para claves y propiedades de configuración.

📝 Text Tools
Generador de Slugs - free online tool

Generador de Slugs

Genera slugs amigables con URL a partir de texto con separadores personalizables.

📝 Text Tools

Frequently Asked Questions

Q ¿Qué es kebab-case?
kebab-case utiliza todas las letras minúsculas con guiones entre palabras: my-variable, page-title, nav-bar-item.
Q ¿Por qué no puedo usar kebab-case para variables de JavaScript?
Los guiones se interpretan como el operador menos en JavaScript. Utilice la notación de corchetes (obj["my-key"]) o camelCase en su lugar.
Q ¿Es kebab-case mejor que snake_case para URL?
Google trata los guiones como separadores de palabras pero no los guiones bajos, por lo que kebab-case es preferido para SEO en URL.
Q ¿Qué pasa con las propiedades personalizadas de CSS?
Las propiedades personalizadas de CSS (variables) utilizan kebab-case con un prefijo --: --primary-color, --font-size-large.
Q ¿Cómo se relaciona BEM con kebab-case?
BEM (Block Element Modifier) utiliza kebab-case como base, con __ para elementos y -- para modificadores.

About This Tool

Convertidor a kebab-case is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.