camelCase czy snake_case czy kebab-case: którego użyć

Wybór między camelCase, snake_case a kebab-case zależy głównie od tego, gdzie dana nazwa występuje. JavaScript i Java używają camelCase (firstName), Python, Ruby i SQL używają snake_case (first_name), a CSS, atrybuty HTML i adresy URL używają kebab-case (first-name). Trzymaj się konwencji języka i stylu obowiązującego w Twoim zespole. Aby zamienić tekst na inną wielkość liter, darmowy konwerter wielkości liter i darmowy generator slugów URL załatwią większość pracy w przeglądarce.

camelCase, snake_case i kebab-case w skrócie

Styl	Przykład	Gdzie go zobaczysz
camelCase	userFirstName	Zmienne i funkcje w JavaScript i TypeScript, metody w Javie, JSON z wielu webowych API
PascalCase	UserFirstName	Nazwy klas w większości języków, komponenty React, metody w C#
snake_case	user_first_name	Zmienne i funkcje w Pythonie, Ruby, nazwy kolumn w SQL, wiele API zwracających JSON
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	Stałe w wielu językach, zmienne środowiskowe
kebab-case	user-first-name	Właściwości i nazwy klas w CSS, atrybuty HTML, adresy URL, nazwy plików, flagi CLI

Nazwy wzięły się z kształtu: camelCase ma garby z wielkich liter, snake_case leży płasko na podkreśleniach, a słowa w kebab-case są nanizane na myślniki jak na szaszłyku.

Język po języku

JavaScript i TypeScript. Zmienne i funkcje zapisuje się w camelCase (getUserName), klasy i komponenty React w PascalCase (UserCard), a stałe często w SCREAMING_SNAKE_CASE (MAX_RETRIES). Wbudowane funkcje języka też tak działają, np. getElementById i toLowerCase.

Python. PEP 8, czyli przewodnik stylu Pythona, używa snake_case dla funkcji, zmiennych i nazw modułów, CapWords (PascalCase) dla klas, a wielkich liter z podkreśleniami dla stałych. Zapis getUserName w Pythonie zadziała, ale każdy programista Pythona, który go przeczyta, uzna go za obcy.

CSS i HTML. Właściwości CSS zapisuje się w kebab-case (background-color, font-size), a większość systemów nazewnictwa klas idzie tym śladem (.nav-item, .card-title). Atrybuty data- w HTML także są w kebab-case, a przeglądarki zamieniają je na zapis dla JavaScript: data-user-id staje się element.dataset.userId. Ta jedna linijka dobrze pokazuje, dlaczego istnieją obie konwencje.

SQL i bazy danych. Nazwy kolumn i tabel to zwykle snake_case (created_at, order_items). Wiele baz danych sprowadza niecytowane nazwy do jednej wielkości liter, więc createdAt po cichu może stać się createdat, chyba że za każdym razem zapiszesz nazwę w cudzysłowie. snake_case tego unika.

Adresy URL i nazwy plików. Używaj kebab-case. Wytyczne Google dotyczące struktury adresów URL zalecają myślniki zamiast podkreśleń do oddzielania słów, bo myślniki wyraźnie zaznaczają granice słów. Małe litery zapobiegają też zepsutym linkom na serwerach, które traktują About.html i about.html jako dwa różne pliki. Zobacz czym jest slug w adresie URL oraz nasze dobre praktyki dla slugów URL.

JSON i API. Nie ma jednej reguły. Wiele API skupionych wokół JavaScriptu używa camelCase, a wiele backendów w Pythonie lub Ruby zwraca snake_case. Wybierz jedną konwencję dla każdego API i nigdy nie mieszaj ich w tej samej odpowiedzi.

Która jest najłatwiejsza do czytania?

Wszystkie trzy są czytelne, gdy już się do nich przyzwyczaisz. Kilka praktycznych różnic:

• snake_case i kebab-case zachowują wyraźny odstęp między słowami, co pomaga przy długich nazwach i skrótowcach (html_parser kontra htmlParser kontra HTMLParser).
• camelCase jest krótszy i nie potrzebuje dodatkowych znaków.
• kebab-case w większości języków nie nadaje się na nazwy zmiennych, bo user-name zostanie odczytane jako user minus name.
• Podwójne kliknięcie w większości edytorów zaznacza całą nazwę w snake_case lub camelCase, ale w kebab-case zwykle zatrzymuje się na myślnikach.

Prawdziwa zasada to konsekwencja. Plik, w którym mieszają się userName, user_name i UserName, jest trudniejszy do czytania niż jakakolwiek jedna konwencja użyta wszędzie.

Zamiana między konwencjami

Zamiana będzie potrzebna przy przenoszeniu danych między warstwami: created_at z API w Pythonie staje się createdAt w JavaScript, tytuł strony staje się adresem URL, a nazwa ustawienia staje się zmienną środowiskową.

Na kebab-case lub snake_case: użyj generatora slugów. Wklej słowa, po jednej nazwie w wierszu, i wybierz Myślniki (-) dla kebab-case albo Podkreślenia (_) dla snake_case. Generator zmienia wszystko na małe litery, zamienia znaki diakrytyczne na zwykłe litery i usuwa symbole. Traktuje każdy symbol jako granicę słowa, więc user_first_name staje się user-first-name i odwrotnie. Nie dzieli jednak camelCase: userFirstName zamieni się w userfirstname. Najpierw wstaw spacje między słowami.

Na SCREAMING_SNAKE_CASE. Zrób wersję snake_case w generatorze slugów, a potem wklej ją do darmowego konwertera wielkości liter i kliknij WIELKIE LITERY. W drugą stronę przycisk małe litery zamieni MAX_RETRIES na max_retries.

Na camelCase lub PascalCase. Nie ma jednego przycisku. Najszybsza droga: wpisz słowa ze spacjami, kliknij Pierwsze litery wielkie w konwerterze (user first name stanie się User First Name), a potem usuń spacje dla PascalCase albo zmień pierwszą literę na małą dla camelCase.

Wiele nazw naraz, w kodzie. Przy dużej zmianie nazw użyj wyszukiwania i zamiany w edytorze z wyrażeniem regularnym. Najpierw sprawdź wzorzec w darmowym testerze wyrażeń regularnych: na przykład _([a-z]) znajduje każde podkreślenie, po którym następuje litera, czyli miejsce, w którym snake_case potrzebowałby wielkiej litery w camelCase. Wiele edytorów potrafi zamienić przechwyconą literę na wielką w zamianie; składnię sprawdź w dokumentacji swojego edytora.

Na co uważać przy konwersji

• Skrótowce. Zdecyduj, czy będzie userId czy userID, HtmlParser czy HTMLParser, i trzymaj się tego.
• Liczby. address_line_2 zamienia się czysto; addressLine2 jest w porządku; po prostu nie zgub cyfry.
• Nazwy publiczne. Zmiana nazwy pola JSON albo adresu URL psuje działanie wszystkim, którzy z nich korzystają. Dodaj przekierowanie dla adresów URL i na jakiś czas zachowaj stare nazwy pól w API.

Zamień swój tekst

Użyj darmowego konwertera wielkości liter do WIELKICH LITER, małych liter i Pierwszych Liter Wielkich, a generatora slugów do kebab-case i snake_case. Oba działają w przeglądarce, a to, co wkleisz, nie opuszcza Twojego urządzenia.