Wann camelCase verwenden
camelCase kann direkt als JavaScript-Bezeichner genutzt werden; background-color wird in Style APIs zu backgroundColor.
Guide zu Namenskonventionen
camelCase vs kebab-case
camelCase entfernt Separatoren und markiert Wörter mit Großbuchstaben; kebab-case verbindet kleingeschriebene Wörter mit Bindestrichen. In Webprojekten kommen beide oft in unterschiedlichen Schichten vor.
Schnellvergleich
| Unterschied | camelCase | kebab-case |
|---|---|---|
| Beispiel | backgroundColor | background-color |
| Typische Nutzung | JavaScript-Bezeichner, Objekt-Properties, DOM-Styles und Anwendungscode | URLs, Slugs, CSS-Namen, Dateien, Konfiguration und CLI-Text |
| Wortseparator | Keiner | Bindestrich (-) |
| Groß-/Kleinschreibung | Interne Wörter groß begonnen | Meist alles klein |
| JavaScript-Bezeichner | Ja | Nicht unquoted |
| Typische Web-Grenze | Anwendungscode | URL / CSS / Textname |
Wann kebab-case verwenden
kebab-case zeigt Wortgrenzen klar und eignet sich für URLs, Slugs, Dateinamen, CSS und textbasierte Konfiguration.
Entscheidungsmatrix
| Kontext | Empfohlene Konvention | Warum |
|---|---|---|
| JavaScript-Bezeichner und Objekt-Properties | camelCase | Bindestriche sind in unquoted JavaScript-Bezeichnern ungültig; camelCase kann direkt verwendet werden. |
| URLs, Slugs und viele Dateinamen | kebab-case | Bindestriche machen Wortgrenzen ohne Abhängigkeit von Groß-/Kleinschreibung gut lesbar. |
| CSS-Property-Namen vs. JavaScript-Style-Zugriff | kebab-case in CSS, camelCase in JavaScript | CSS nutzt Namen mit Bindestrichen, DOM- und React-Style-APIs die entsprechenden camelCase-Namen. |
| Custom-Element-Namen | Name mit Bindestrich | Custom-Element-Namen benötigen einen Bindestrich; eine kebab-ähnliche Schreibweise passt zur Plattformvorgabe. |
Welchen Namensstil solltest du wählen?
Nutze camelCase für JavaScript-Bezeichner und kebab-case für externe hyphenierte Namen; konvertiere nur an dieser Grenze.
Häufige Fehler
- Camelize CSS Custom Properties wie --brand-color nicht blind; das führende -- und der Name selbst sind semantisch relevant.
- Verwende kebab-case nicht als unquoted JavaScript-Variablennamen, weil der Parser den Bindestrich als Minus interpretiert.
- Übertrage URL- oder Dateinamensregeln nicht automatisch auf Bezeichner im Quellcode.
Zwischen Namensstilen konvertieren
Füge unten einen Bezeichner ein, um Zielformat und unterstützte Namensstile zu sehen. Die Konvertierung läuft lokal im Browser.
Erkannt: snake_case
kebab-case-Ausgabe
user-profile-image-url
Alle Namensformate
camelCase
userProfileImageUrlPascalCase
UserProfileImageUrlsnake_case
user_profile_image_urlkebab-case
user-profile-image-urlCONSTANT_CASE
USER_PROFILE_IMAGE_URLdot.case
user.profile.image.urlpath/case
user/profile/image/urlDie Konvertierung findet lokal in deinem Browser statt. Die Eingabe wird nicht an einen Conversion-Server gesendet.