¿Qué es kebab-case? Uso en URLs y CSS
kebab-case escribe cada letra en minúscula y une las palabras con guiones (-), llamado así por los ingredientes ensartados en un kebab.
Las reglas de kebab-case
user profile image se convierte en user-profile-image en kebab-case. También se le llama spinal-case o dash-case.
Se diferencia de snake_case solo en que usa guiones en lugar de guiones bajos.
Dónde se usa
- Rutas y slugs de URL (p. ej. /my-blog-post)
- Clases de CSS y propiedades personalizadas (--main-color)
- Atributos data de HTML (data-user-id)
- Nombres de archivo y nombres de paquetes de npm
Por qué guiones en URLs y CSS
En muchos lenguajes de programación los guiones bajos se permiten en los identificadores, pero los guiones se interpretan como una resta y no pueden usarse en los nombres. Así que los guiones se asentaron de forma natural en ámbitos fuera del código, como URLs, CSS y nombres de archivo.
Los motores de búsqueda tratan los guiones como separadores de palabras, mientras que los guiones bajos a veces no, por eso se recomiendan los guiones en las URLs.
Una advertencia
Los guiones no pueden usarse en los identificadores de código, así que kebab-case no se usa para cosas como los nombres de variables de JavaScript. En esos casos, conviértelo a camelCase en su lugar.