camelCase, snake_case nebo kebab-case: který použít

camelCase vs snake_case vs kebab-case je hlavně otázkou, kde název žije. JavaScript a Java používají camelCase (firstName), Python, Ruby a SQL používají snake_case (first_name) a CSS, atributy HTML a URL používají kebab-case (first-name). Řiďte se konvencí jazyka a stylovým průvodcem vašeho týmu. Pro převod textu mezi velikostmi písmen a formáty pokryjí většinu práce v prohlížeči převodník velikosti písmen zdarma a generátor URL slugů zdarma.

camelCase vs snake_case vs kebab-case na první pohled

Styl	Příklad	Kde se objeví
camelCase	userFirstName	proměnné a funkce v JavaScriptu a TypeScriptu, metody v Javě, JSON z mnoha webových API
PascalCase	UserFirstName	názvy tříd ve většině jazyků, komponenty React, metody v C#
snake_case	user_first_name	proměnné a funkce v Pythonu, Ruby, názvy sloupců v SQL, mnohá JSON API
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	konstanty v mnoha jazycích, proměnné prostředí
kebab-case	user-first-name	vlastnosti a názvy tříd v CSS, atributy HTML, URL, názvy souborů, přepínače CLI

Názvy vzniknou z tvaru: camelCase má hrby velkých písmen, snake_case leží naplocho na podtržítkách a slova v kebab-case jsou nanizaná na pomlčkách.

Jazyk po jazyku

JavaScript a TypeScript. Proměnné a funkce jsou v camelCase (getUserName), třídy a komponenty React v PascalCase (UserCard) a konstanty bývají SCREAMING_SNAKE_CASE (MAX_RETRIES). Vestavěné funkce jazyka se tomu řídí, například getElementById a toLowerCase.

Python. PEP 8, stylový průvodce Pythonu, používá snake_case pro funkce, proměnné a názvy modulů, CapWords (PascalCase) pro třídy a velká písmena s podtržítky pro konstanty. Zápis getUserName v Pythonu funguje, ale každému pythonistovi, který ho přečte, bude připadat nepatřičný.

CSS a HTML. Vlastnosti CSS jsou v kebab-case (background-color, font-size) a většina systémů pojmenování tříd to následuje (.nav-item, .card-title). Atributy HTML data- jsou také v kebab-case a prohlížeče je pro JavaScript převádějí: data-user-id se stane element.dataset.userId. Tento jeden řádek dobře shrnuje, proč existují obě konvence.

SQL a databáze. Názvy sloupců a tabulek bývají v snake_case (created_at, order_items). Mnoho databází převádí nekvótované názvy na jednu velikost písmen, takže se createdAt tiše může stát createdat, pokud ho pokaždé neuvedete v uvozovkách. snake_case se tomu vyhne.

URL a názvy souborů. Používejte kebab-case. Google v pokynech ke struktuře URL doporučuje pomlčky místo podtržítek k oddělení slov, protože pomlčky jasně označují hranice slov. Malá písmena také zabrání rozbitým odkazům na serverech, které považují About.html a about.html za různé soubory. Viz co je URL slug a naše osvědčené postupy pro URL slugy.

JSON a API. Neexistuje jediné pravidlo. Mnohá API zaměřená na JavaScript používají camelCase a mnohé back-endy v Pythonu nebo Ruby vracejí snake_case. Zvolte jeden styl pro každé API a nikdy je v jedné odpovědi nemíchejte.

Který je nejsnáze čitelný?

Všechny tři jsou čitelné, jakmile si na ně zvyknete. Několik praktických rozdílů:

• snake_case a kebab-case udržují zřetelnou mezeru mezi slovy, což pomáhá u dlouhých názvů a zkratek (html_parser vs htmlParser vs HTMLParser).
• camelCase je kratší a nepotřebuje žádné další znaky.
• kebab-case nelze ve většině jazyků použít pro názvy proměnných, protože user-name se čte jako user minus name (user mínus name).
• Dvojklik v většině editorů označí celý název v snake_case nebo camelCase, ale u kebab-case obvykle skončí u pomlček.

Skutečným pravidlem je konzistence. Soubor, který míchá userName, user_name a UserName, se čte hůře než kterýkoli jeden styl použitý všude.

Převádění mezi velikostmi

Převod budete potřebovat, když přesouváte data mezi vrstvami: created_at z API v Pythonu se stane createdAt v JavaScriptu, titulek stránky se stane URL nebo název nastavení se stane proměnnou prostředí.

Do kebab-case nebo snake_case: použijte generátor slugů. Vložte slova, jeden název na řádek, a zvolte Pomlčky (-) pro kebab-case nebo Podtržítka (_) pro snake_case. Vše převede na malá písmena, akcenty změní na prosté znaky a symboly zahodí. Každý symbol bere jako hranici slova, takže se user_first_name změní na user-first-name a zase zpět. Nerozděluje však camelCase: userFirstName vznikne jako userfirstname. Nejprve vložte mezery mezi slova.

Do SCREAMING_SNAKE_CASE. Vytvořte verzi snake_case v generátoru slugů, pak ji vložte do převodníku velikosti písmen zdarma a klikněte na VELKÁ PÍSMENA. Opačným směrem převede malá písmena MAX_RETRIES na max_retries.

Do camelCase nebo PascalCase. Neexistuje jedno tlačítko. Nejrychlejší cesta: napište slova s mezerami, v převodníku velikosti písmen klikněte na Velká počáteční písmena (user first name se změní na User First Name), pak odstraňte mezery pro PascalCase a pro camelCase zmenšete první písmeno.

Mnoho názvů najednou v kódu. Pro velké přejmenování použijte vyhledávání a nahrazování v editoru s regulárním výrazem. Vzor nejprve vyzkoušejte v testeru regulárních výrazů zdarma: například _([a-z]) najde každé podtržítko následované písmenem, tedy místo, kde by snake_case v camelCase potřeboval velké písmeno. Mnohé editory umějí v náhradě převést zachycené písmeno na velké; syntaxi najdete v dokumentaci vašeho editoru.

Na co si dát pozor při převodu

• Zkratky. Rozhodněte, zda bude userId nebo userID, HtmlParser nebo HTMLParser, a držte se toho.
• Čísla. address_line_2 se převede čistě; addressLine2 je v pořádku; jen číslici nezahoďte.
• Veřejné názvy. Přejmenování pole JSON nebo URL rozbije ty, kdo je používají. U URL přidejte přesměrování a v API nechte starší názvy polí po nějakou dobu fungovat.

Převeďte svůj text

Pro VELKÁ, malá a Velká počáteční písmena použijte převodník velikosti písmen zdarma a pro kebab-case a snake_case generátor slugů. Oba běží ve vašem prohlížeči a nic, co vložíte, neopouští vaše zařízení.