Convertir cualquier frase en kebab-case — all lowercase, words joined by hyphens. Estándar para slugs URL, nombres de clase CSS y nombres de atributos HTML.
User Profile Background Color → user-profile-background-color
kebab-case (a veces llamado dash-case, hyphen-case, o lisp-case) es una convención de nombres donde las palabras se escriben en la minúscula y se unen por hyphens. Es el estilo dominante para los slugs URL, CSS nombres de clase, HTML data-* atributos y la mayoría de las claves del archivo de configuración.
Los motores de búsqueda tratan a los hipófilos como separadores de palabras dentro de las manchas URL pero tratan los subrayados como conectores, por lo que my-blog-post se clasifica para "mi publicación de blog" mientras my_blog_post Por eso, kebab-case es el estándar URL-slug, independientemente de cuál sea el estilo de caso del resto de sus usos de base de código.
Cada URL de este sitio (/word-counter, /typing-test-5-minutes) es la kebab-case. SEO mejor práctica: hifens, no subraya; sólo la minúscula.
BEM, Tailwind, Bootstrap y la mayoría de los marcos CSS utilizan clases de kebab-case. .btn-primary, .card-header, .is-active.
data-user-id, data-toggle, data-bs-target. Estos se convierten en camelloCaso automáticamente cuando se accede a través de JavaScript dataset propiedad.
Las opciones CLI de formato largo utilizan kebab-case: --dry-run, --no-cache, --output-format. Las banderas cortas de un solo carácter utilizan un solo guión: -v.
Los formatos de configuración modernos (YAML, TOML) y la mayoría de los generadores estáticos (Jekyll, Hugo) prefieren las teclas de caso de kebab para nombres de archivos legibles por humanos y campos de primera necesidad.
El convertidor procesa la entrada por primera normalización Unicode (NFKC) para descomponer caracteres especiales en formas base. Luego divide la cadena en límites no alfanuméricos (espacio blanco, subraya, punción, etc.), descartando cualquier no-alfanumérico[A-Za-z0-9] caracteres. Cada palabra se reduce utilizando el mapeo completo de caso Unicode, y las palabras se juntan con hyphens (-). El plomo, el seguimiento y las hisfnas consecutivas son despojados. no preservar acrónimos o apostrofes posesivos; cada secuencia contigua de caracteres alfanuméricos se convierte en una sola palabra.
Mientras que puede lograr la conversión de la caja de kebab a través de línea de comandos o procesador de palabras, esta herramienta ofrece una solución dedicada e instantánea.
| esta herramienta | comando sed | Buscar/reemplazar palabras | |
|---|---|---|---|
| Facilidad de uso | Sin configuración, conversión con un solo clic | Requiere conocimientos de línea de comandos y expresiones regulares | Múltiples pasos: reemplazar todos los espacios con las hipófisis, luego cambiar caso a minúscula |
| Caracteres especiales | Despoja automáticamente a todos los charcos no alfanuméricos excepto los hifénes | Debe crear expresiones regulares para manejar Unicode y casos extremos. | Puede dejar puntuación a menos que se maneje manualmente |
| Números | Conserva los números como parte de las palabras. | Se incluye fácilmente en expresiones regulares | Los números se mantienen por defecto |
| Múltiples espacios | Se contrae a un solo guión | Requiere pasos adicionales para eliminar hisofens consecutivos | Reemplaza cada espacio con un hifeno, que conduce a dobles hifén |
El término 'casa de kebab' fue acuñado a principios de los años 2000 por los programadores comparando humorísticamente convenciones de nominación con alimentos (camelCase, serpiente case, kebab-case). Obtuvo una adopción generalizada con el aumento de CSS y los embragues de URL, y es un descendiente directo de la tradición de Lisp de utilizar hifens en identificadores (caso de ris).
Los hipófilos entre letras se asemejan a los cortadores que se ejecutan a través de trozos de carne en un kebab. El nombre data de principios de 2010 entre desarrolladores de JavaScript; "casa de drásh" y "casa de hifeno" son sinónimos mayores.
kebab-case para URLs, CSS y atributos HTML (donde se permite un hiphen pero un subrayado se ve raro). caso_serpiente para nombres variables en Python/Ruby, columnas de bases de datos y la mayoría de identificadores de código (donde los hyphens se verían como resta).
Sí si se utiliza como un nombre variable o de propiedad — lecturas de JavaScript foo-bar como foo menos bar. kebab-case es para cadenas (nombres de clase CSS, persianas URL, atributos HTML) — nunca para identificadores en código.
Google recomienda explícitamente las hifénes. Las hifénes son separadores de palabras (so my-page se lee como "mi página"); los subrayados son conectores (so my_page se lee como "my page" — una ficha). Para SEO, siempre use las URLs de la caja de kebab.