Was ist kebab-case? Verwendung in URLs und CSS

kebab-case schreibt jeden Buchstaben klein und verbindet Wörter mit Bindestrichen (-), benannt nach den auf einem Kebab-Spieß aufgereihten Zutaten.

Die Regeln von kebab-case

Aus user profile image wird in kebab-case user-profile-image. Es wird auch spinal-case oder dash-case genannt.

Es unterscheidet sich von snake_case nur dadurch, dass es Bindestriche statt Unterstriche verwendet.

Wo es verwendet wird

• URL-Pfade und Slugs (z. B. /my-blog-post)
• CSS-Klassen und benutzerdefinierte Eigenschaften (--main-color)
• HTML-Datenattribute (data-user-id)
• Dateinamen und npm-Paketnamen

Warum Bindestriche in URLs und CSS

In vielen Programmiersprachen sind Unterstriche in Bezeichnern erlaubt, aber Bindestriche werden als Subtraktion gelesen und können nicht in Namen verwendet werden. So haben sich Bindestriche natürlich in Bereichen außerhalb des Codes etabliert, etwa in URLs, CSS und Dateinamen.

Suchmaschinen behandeln Bindestriche als Worttrenner, Unterstriche hingegen manchmal nicht, weshalb Bindestriche in URLs empfohlen werden.

Ein Vorbehalt

Bindestriche können nicht in Code-Bezeichnern verwendet werden, daher wird kebab-case nicht für Dinge wie JavaScript-Variablennamen genutzt. Wandle in diesen Fällen stattdessen in camelCase um.