camelCase vs snake_case vs kebab-case: melyiket érdemes

A camelCase, a snake_case és a kebab-case közötti választás főleg azon múlik, hol él a név. A JavaScript és a Java camelCase-t használ (firstName), a Python, a Ruby és az SQL snake_case-t (first_name), a CSS, a HTML-attribútumok és az URL-ek pedig kebab-case-t (first-name). Kövesd a nyelv szokását és a csapatod stílusútmutatóját. A szövegek átalakításához az ingyenes kis- és nagybetű-átalakító és az ingyenes URL-slug-generátor a böngészőben elvégzi a legtöbb munkát.

camelCase vs snake_case vs kebab-case egy pillantásra

Stílus	Példa	Hol találkozhatsz vele
camelCase	userFirstName	JavaScript és TypeScript változók és függvények, Java metódusok, sok webes API JSON-ja
PascalCase	UserFirstName	Osztálynevek a legtöbb nyelvben, React-komponensek, C# metódusok
snake_case	user_first_name	Python változók és függvények, Ruby, SQL oszlopnevek, sok JSON API
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	Konstansok sok nyelvben, környezeti változók
kebab-case	user-first-name	CSS-tulajdonságok és osztálynevek, HTML-attribútumok, URL-ek, fájlnevek, CLI-kapcsolók

A nevek alakjukról kapták a nevüket: a camelCase-ben nagybetűs púpok vannak, a snake_case laposan fekszik az aláhúzásokon, a kebab-case szavai pedig kötőjelre vannak fűzve.

Nyelvenként

JavaScript és TypeScript. A változók és a függvények camelCase-ek (getUserName), az osztályok és a React-komponensek PascalCase-ek (UserCard), a konstansok gyakran SCREAMING_SNAKE_CASE-ek (MAX_RETRIES). A nyelv beépített függvényei is ezt követik, például a getElementById és a toLowerCase.

Python. A PEP 8, a Python stílusútmutatója, snake_case-t használ a függvényekhez, változókhoz és modulnevekhez, CapWords (PascalCase) az osztályokhoz, a konstansokhoz pedig nagybetűs aláhúzásos írásmódot. A getUserName Pythonban működik, de minden Python-fejlesztőnek szokatlanul fog kinézni.

CSS és HTML. A CSS-tulajdonságok kebab-case-ek (background-color, font-size), és a legtöbb osztálynév-rendszer ezt követi (.nav-item, .card-title). A HTML data- attribútumai is kebab-case-ek, a böngészők pedig JavaScripthez átalakítják őket: a data-user-id a element.dataset.userId lesz. Ez a sor szépen összefoglalja, miért létezik mindkét szokás.

SQL és adatbázisok. Az oszlop- és táblanevek általában snake_case-ek (created_at, order_items). Sok adatbázis az idézőjel nélküli neveket egységes írásmódra alakítja, így a createdAt csendben createdat lehet, hacsak nem idézed minden alkalommal. A snake_case ezt elkerüli.

URL-ek és fájlnevek. Használj kebab-case-t. A Google URL-szerkezeti irányelvei kötőjelet ajánlanak aláhúzás helyett a szavak elválasztására, mert a kötőjel egyértelműen jelöli a szóhatárt. A kisbetűk pedig elkerülik a hibás linkeket azoknál a szervereknél, amelyek az About.html-t és az about.html-t különböző fájlként kezelik. Erről bővebben: mi az URL-slug, és az URL-slugok legjobb gyakorlatai blogbejegyzésünk.

JSON és API-k. Nincs egyetlen szabály. Sok JavaScript-központú API camelCase-t használ, sok Python- vagy Ruby-háttérszolgáltatás snake_case-t ad vissza. API-nként válassz egyet, és soha ne keverd ugyanazon válaszon belül.

Melyik a legkönnyebben olvasható?

Mindhárom olvasható, ha megszoktad őket. Néhány gyakorlati különbség:

• A snake_case és a kebab-case tiszta rést tart a szavak között, ami hosszú neveknél és rövidítéseknél segít (html_parser vs htmlParser vs HTMLParser).
• A camelCase rövidebb, és nem kell hozzá extra karakter.
• A kebab-case a legtöbb nyelvben nem használható változónévként, mert a user-name úgy olvasódik, mint „user mínusz name".
• A dupla kattintás a legtöbb szerkesztőben kijelöl egy egész snake_case vagy camelCase nevet, a kebab-case-nél viszont általában a kötőjeleknél megáll.

A valódi szabály a következetesség. A userName, a user_name és a UserName egymás mellett rosszabbul olvasható, mint bármelyik stílus, amelyet mindenhol használnak.

Átalakítás a formátumok között

Átalakítanod akkor kell, ha adatot viszel át rétegek között: egy Python API created_at mezőjéből JavaScript createdAt lesz, egy oldalcímből URL, vagy egy beállítás nevéből környezeti változó.

kebab-case vagy snake_case: a slug-generátor. Illeszd be a szavakat soronként egy névvel, és válaszd a Kötőjel (-) lehetőséget kebab-case-hez vagy az Aláhúzás (_)-t snake_case-hez. Mindent kisbetűssé alakít, az ékezetes betűket sima betűkké, és elhagyja a szimbólumokat. Minden szimbólumot szóhatárként kezel, így a user_first_name user-first-name lesz, és fordítva. A camelCase-t viszont nem bontja szét: a userFirstName userfirstname lesz. Ezért előbb tegyél szóközöket a szavak közé.

SCREAMING_SNAKE_CASE-hez. Készítsd el a snake_case változatot a slug-generátorban, majd illeszd be az ingyenes kis- és nagybetű-átalakítóba, és kattints a NAGYBETŰS gombra. A másik irányba a kisbetűs gomb a MAX_RETRIES-ből max_retries-t csinál.

camelCase vagy PascalCase-hez. Nincs egykattintásos gomb. A leggyorsabb út: írd be a szavakat szóközökkel, kattints a Nagy kezdőbetűs gombra az átalakítóban (a user first name User First Name lesz), majd PascalCase-hez töröld a szóközöket, camelCase-hez pedig az első betűt tedd kisbetűssé.

Sok név egyszerre, kódon belül. Nagy átnevezéshez használd a szerkesztőd keresés-csere funkcióját reguláris kifejezéssel. Először teszteld a mintát az ingyenes reguláris kifejezés-tesztelőben: például a _([a-z]) minden olyan aláhúzást megtalál, amelyet betű követ, vagyis azt a helyet, ahol snake_case-ből camelCase-be nagybetű kellene. Sok szerkesztő tud nagybetűssé tenni az elfogott betűt a csere részben; a szintaxist a szerkesztőd dokumentációjában nézd meg.

Átalakítás közben figyelj ezekre

• Rövidítések. Döntsd el, hogy userId vagy userID, HtmlParser vagy HTMLParser lesz, és maradj a választásodnál.
• Számok. Az address_line_2 tisztán átalakul, az addressLine2 rendben van; csak a számjegyet ne hagyd el.
• Nyilvános nevek. Egy JSON-mező vagy URL átnevezése megtöri azokat, akik használják. URL-eknél adj átirányítást, API-knál pedig egy ideig tartsd működőképesen a régi mezőneveket.

Alakítsd át a szöveged

Az ingyenes kis- és nagybetű-átalakítóval készíthetsz NAGYBETŰS, kisbetűs és Nagy kezdőbetűs szöveget, a slug-generátorral pedig kebab-case-t és snake_case-t. Mindkettő a böngészőben fut, és amit beillesztesz, nem hagyja el az eszközödet.