camelCase vs snake_case vs kebab-case: wat gebruik je?

camelCase vs snake_case vs kebab-case is vooral een kwestie van waar de naam staat. JavaScript en Java gebruiken camelCase (firstName), Python, Ruby en SQL gebruiken snake_case (first_name), en CSS, HTML-attributen en URL's gebruiken kebab-case (first-name). Volg de conventie van de taal en de stijlgids van je team. Om tekst van de ene notatie naar de andere om te zetten, doen de gratis tools Hoofdletters omzetten en URL-slug maken het meeste werk in je browser.

camelCase vs snake_case vs kebab-case in één oogopslag

Stijl	Voorbeeld	Waar je het ziet
camelCase	userFirstName	Variabelen en functies in JavaScript en TypeScript, methoden in Java, JSON van veel web-API's
PascalCase	UserFirstName	Klassenamen in de meeste talen, React-componenten, methoden in C#
snake_case	user_first_name	Variabelen en functies in Python, Ruby, kolomnamen in SQL, veel JSON-API's
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	Constanten in veel talen, omgevingsvariabelen
kebab-case	user-first-name	CSS-eigenschappen en klassenamen, HTML-attributen, URL's, bestandsnamen, CLI-vlaggen

De namen komen van de vormen: camelCase heeft bulten van hoofdletters, snake_case ligt plat op underscores, en bij kebab-case zijn de woorden aan streepjes geregen als aan een spies.

Per taal

JavaScript en TypeScript. Variabelen en functies zijn camelCase (getUserName), klassen en React-componenten zijn PascalCase (UserCard), en constanten zijn vaak SCREAMING_SNAKE_CASE (MAX_RETRIES). De ingebouwde functies van de taal volgen dit ook, zoals getElementById en toLowerCase.

Python. PEP 8, de stijlgids van Python, gebruikt snake_case voor functies, variabelen en modulenamen, CapWords (PascalCase) voor klassen en hoofdletters met underscores voor constanten. getUserName schrijven in Python werkt, maar het valt uit de toon voor elke Python-ontwikkelaar die het leest.

CSS en HTML. CSS-eigenschappen zijn kebab-case (background-color, font-size), en de meeste systemen voor klassenamen doen hetzelfde (.nav-item, .card-title). HTML-attributen met data- zijn ook kebab-case, en browsers zetten ze om voor JavaScript: data-user-id wordt element.dataset.userId. Die ene regel vat mooi samen waarom beide conventies bestaan.

SQL en databases. Kolom- en tabelnamen zijn meestal snake_case (created_at, order_items). Veel databases zetten namen zonder aanhalingstekens om naar één notatie, dus createdAt kan stilletjes createdat worden, tenzij je het elke keer tussen aanhalingstekens zet. Met snake_case voorkom je dat.

URL's en bestandsnamen. Gebruik kebab-case. De richtlijnen van Google voor URL-structuur raden streepjes aan in plaats van underscores om woorden te scheiden, omdat streepjes woordgrenzen duidelijk aangeven. Kleine letters voorkomen ook kapotte links op servers die About.html en about.html als verschillende bestanden zien. Lees wat een URL-slug is en onze best practices voor URL-slugs.

JSON en API's. Er is geen vaste regel. Veel API's met JavaScript als basis gebruiken camelCase, en veel back-ends in Python of Ruby geven snake_case terug. Kies er één per API en meng ze nooit in hetzelfde antwoord.

Wat leest het makkelijkst?

Alle drie zijn leesbaar als je eraan gewend bent. Een paar praktische verschillen:

• snake_case en kebab-case houden een duidelijke ruimte tussen woorden, wat helpt bij lange namen en afkortingen (html_parser vs htmlParser vs HTMLParser).
• camelCase is korter en heeft geen extra tekens nodig.
• kebab-case kun je in de meeste talen niet gebruiken voor variabelenamen, omdat user-name wordt gelezen als user min name.
• Dubbelklikken selecteert in de meeste editors een hele naam in snake_case of camelCase, maar stopt bij kebab-case meestal bij de streepjes.

De echte regel is consistentie. Een bestand dat userName, user_name en UserName door elkaar gebruikt, leest lastiger dan welke stijl ook die overal wordt gebruikt.

Omzetten tussen notaties

Je moet omzetten als je gegevens tussen lagen verplaatst: created_at uit een Python-API wordt createdAt in JavaScript, een paginatitel wordt een URL, of de naam van een instelling wordt een omgevingsvariabele.

Naar kebab-case of snake_case: gebruik de slug-generator. Plak de woorden, één naam per regel, en kies Streepjes (-) voor kebab-case of Underscores (_) voor snake_case. Alles wordt kleine letters, accenten worden gewone letters en symbolen verdwijnen. Elk symbool telt als woordgrens, dus user_first_name wordt user-first-name en weer terug. camelCase splitst hij echter niet: userFirstName wordt userfirstname. Zet dan eerst spaties tussen de woorden.

Naar SCREAMING_SNAKE_CASE. Maak de versie in snake_case met de slug-generator, plak die in de gratis tool Hoofdletters omzetten en klik op HOOFDLETTERS. Andersom zet kleine letters MAX_RETRIES om in max_retries.

Naar camelCase of PascalCase. Daar is geen knop voor. De snelste route: typ de woorden met spaties, klik in de tool op Elk Woord Met Hoofdletter (user first name wordt User First Name), haal dan de spaties weg voor PascalCase en maak de eerste letter klein voor camelCase.

Veel namen tegelijk, in code. Voor een grote hernoeming gebruik je zoeken en vervangen in je editor met een reguliere expressie. Test het patroon eerst in de gratis Regex-tester: _([a-z]) vindt bijvoorbeeld elke underscore gevolgd door een letter, precies de plek waar snake_case in camelCase een hoofdletter nodig heeft. Veel editors kunnen de gevangen letter in de vervanging een hoofdletter geven; kijk in de documentatie van je editor voor de syntaxis.

Waar je op let bij het omzetten

• Afkortingen. Kies of het userId of userID wordt, HtmlParser of HTMLParser, en houd je daaraan.
• Cijfers. address_line_2 zet je netjes om; addressLine2 is prima; laat het cijfer alleen niet wegvallen.
• Openbare namen. Als je een JSON-veld of URL hernoemt, gaat het mis bij iedereen die het gebruikt. Voeg een redirect toe voor URL's en laat oude veldnamen in API's nog een tijdje werken.

Zet je tekst om

Gebruik de gratis tool Hoofdletters omzetten voor HOOFDLETTERS, kleine letters en Elk Woord Met Hoofdletter, en de slug-generator voor kebab-case en snake_case. Beide werken in je browser, en niets van wat je plakt verlaat je apparaat.