camelCase vs snake_case vs kebab-case: Panduan Online Konvensi Penamaan 2026
userID atau userId? user_profile atau userProfile? URL pakai - atau _? Pertanyaan kecil seperti ini bisa menggagalkan PR review lima kali sehari. Jawabannya bukan soal “selera” — setiap bahasa pemrograman utama dan setiap standar web sudah punya aturannya, dan begitu Anda melihat semuanya dalam satu halaman, perdebatan itu hilang.
Panduan ini mencakup enam case yang benar-benar akan Anda temui di kode (camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case / path/case / Header-Case), matriks keputusan untuk tujuh bahasa, perdebatan akronim parseUrl-vs-parseURL dengan data nyata dari GitHub, alasan SEO untuk URL kebab-case, serta enam jebakan yang sering muncul saat Anda mengonversi antar case secara otomatis. Jika Anda ingin melihat 15 output case untuk string apa pun sekaligus, Pengubah Case merendernya secara live di browser Anda.
Enam Case dalam Sekilas Pandang
Sebelum masuk ke perbandingan, ini lembar contekannya. Cetak, tempel ke wiki tim, atau biarkan terbuka di salah satu tab.
| Gaya case | Contoh | Penggunaan tipikal | Asal / pempopuler |
|---|---|---|---|
| camelCase | userProfileImage | Variabel & metode JS, TS, Java, Swift | Smalltalk → Java |
| PascalCase | UserProfileImage | Kelas, komponen React/Vue, tipe TS | Bahasa Pascal |
| snake_case | user_profile_image | Python, Ruby, Rust, kolom SQL | C / Unix awal |
| kebab-case | user-profile-image | Kelas CSS, slug URL, atribut HTML | Lisp / web modern |
| CONSTANT_CASE | USER_PROFILE_IMAGE | Env var, konstanta level atas, makro | Makro C / env Unix |
| dot.case | user.profile.image | Paket Java, jalur MongoDB, kunci TOML | Konvensi namespacing |
| path/case | user/profile/image | Jalur URL, filesystem, ref Git | Jalur Unix |
| Header-Case | User-Profile-Image | Nama header HTTP/1.1 (canonical) | RFC 2616 |
Delapan baris untuk enam case “asli” — dot.case, path/case, dan Header-Case berbagi tokenisasi yang sama dengan separator berbeda, sehingga kebanyakan library case memperlakukannya sebagai satu rumpun.
Setiap Case Dibedah
camelCase: standar JS/Java
camelCase berasal dari Smalltalk, tetapi Java-lah yang menyebarkannya ke industri. Konvensi kode Java dari Sun tahun 1995 menjadikan firstName, getUserProfile, dan xmlParser sebagai ejaan default, dan setiap bahasa yang ingin terlihat ala Java — JavaScript, ActionScript, Swift, Kotlin, Dart — mewarisi bentuk yang sama.
Aturannya: huruf kecil untuk kata pertama, kapitalkan setiap kata berikutnya, hilangkan separator. Tanpa underscore, tanpa tanda hubung, tanpa spasi. Nama “camelCase” datang dari siluet huruf kapital yang mencuat seperti punuk unta di antara huruf kecil.
Dua kasus tepi yang sering salah ditangani: nama merek yang diawali huruf kecil (iPhone, eBay, iOS) — saat salah satunya muncul di kode, jangan paksa kapitalkan i-nya; eja sesuai cara mereknya menulis dan terima identifier yang sedikit aneh itu. Dan akronim — dibahas detail di bawah.
PascalCase: kelas dan komponen
PascalCase adalah camelCase dengan huruf pertama dikapitalkan. Beberapa style guide menyebutnya “UpperCamelCase” karena alasan itu. Bahasa Pascal memakainya di era 1970-an dan nama itu bertahan.
Tempat-tempatnya: nama kelas di setiap bahasa OO keluarga C (Java, C#, C++, Kotlin, Swift, TypeScript), nama komponen React/Vue/Angular, alias tipe dan interface TypeScript (type UserProfile, interface AuthState), serta nama modul/file di beberapa ekosistem (UserService.cs di C#).
Kenapa kelas perlu case terpisah? Sinyal visual. Saat Anda membaca new userProfile() versus new UserProfile(), yang kedua langsung terbaca sebagai tipe dan yang pertama seperti pemanggilan fungsi yang salah jalur. Bahasa yang mencampur namespace nilai dan tipe mengandalkan kapitalisasi untuk memilah keduanya.
snake_case: Python, Ruby, Rust, SQL
snake_case lebih tua dari kelihatannya — C dan Unix awal memakai nama bergaya errno_h dan fopen_s karena keyboard terminal PDP-11 membuat underscore mudah diketik sementara kapitalisasi ala Pascal merepotkan. Python mengadopsinya sebagai konvensi resmi PEP 8, komunitas Ruby memilihnya secara organik, dan Rust menjadikannya default yang dipaksakan compiler — lint akan protes jika variabel Anda ditulis userId alih-alih user_id.
Aturannya: semua huruf kecil, sambungkan kata dengan underscore. user_profile_image, parse_html, max_retries.
Sudut pandang basis data penting dan sering dilewati tutorial bahasa. Hampir semua ORM SQL — SQLAlchemy, Hibernate, Sequelize, TypeORM, Active Record — mengambil snake_case sebagai default nama kolom, terlepas dari konvensi bahasa host. Alasannya portabilitas: PostgreSQL melipat identifier tak ber-quote ke huruf kecil, MySQL di Linux case-sensitive, MySQL di macOS/Windows case-insensitive, dan SQLite memperlakukan nama kolom sebagai string opaque. snake_case adalah satu-satunya ejaan yang lolos dari semua itu tanpa perlu quoting.
kebab-case: pilihan dunia web
Web bersepakat memakai kebab-case untuk semua hal yang terlihat pengguna: nama kelas CSS (.user-profile-image), slug URL (/blog/naming-conventions-guide), atribut HTML kustom (data-user-id), nama tag Web Component (<user-card>, yang oleh spesifikasi memang wajib mengandung tanda hubung).
Namanya muncul dalam sekitar delapan varian di dokumentasi lama — “dash-case,” “spinal-case,” “lisp-case,” “skewer-case,” “hyphen-case.” Semuanya berarti hal yang sama. “kebab-case” akhirnya melekat berkat lelucon lama di Stack Overflow tentang kata-kata yang terlihat seperti daging di tusuk sate.
Satu aturan yang kurang jelas: nama kelas HTML dan CSS dalam praktiknya case-insensitive, tetapi ejaan canonical-nya tetap huruf kecil. .User-Profile jalan di kebanyakan browser, tetapi merusak tooling server-side yang melakukan hash nama kelas, dan membuat reviewer kode bingung. Tetap pakai huruf kecil.
CONSTANT_CASE: env var dan makro
CONSTANT_CASE (kadang disebut SCREAMING_SNAKE_CASE di lingkaran Rust) adalah sinyal universal “nilai ini tidak pernah berubah saat runtime.” MAX_RETRIES, API_KEY, DEFAULT_TIMEOUT_MS. Setiap bahasa punya konvensi untuk ini, dan setiap sistem CI, container runtime, dan shell mengharapkan environment variable dalam case ini (DATABASE_URL, NODE_ENV, PATH).
Jebakannya: kata kunci const di JavaScript bukan berarti “pakai CONSTANT_CASE.” const result = await fetch(url) adalah camelCase yang benar. Simpan CONSTANT_CASE untuk konstanta semantik — nilai yang akan di-#define di C, jenis hal yang bila diubah saat runtime jadi bug. MAX_RETRIES = 3 memenuhi syarat. result tidak.
dot.case, path/case, Header-Case
Tiga saudara yang berbagi tokenizer sama dengan separator berbeda.
dot.case merepresentasikan kunci hierarkis: paket Java (com.example.service), jalur field MongoDB (user.profile.image), kunci konfigurasi TOML/INI ([database.primary]), jalur metode Lodash (_.get(obj, 'user.profile.image')). Saat membaca string dot.case, Anda melihat “namespace, namespace, leaf.”
path/case merepresentasikan lokasi harfiah: jalur URL, jalur filesystem, ref Git (feature/add-auth). Pilihan titik-versus-garis-miring punya makna — garis miring menandakan “ini sesuatu yang nyata di suatu tempat,” titik menandakan “ini label.”
Header-Case adalah konvensi HTTP/1.1: Content-Type, Access-Control-Allow-Origin, X-Forwarded-For. Secara teknis header HTTP/1.1 case-insensitive (RFC 2616), jadi content-type jalan, tetapi setiap framework, setiap dokumentasi, dan setiap developer mengharapkan ejaan Header-Case. HTTP/2 dan HTTP/3 mengubah hal ini — RFC 7540 §8.1.2 mewajibkan nama header huruf kecil saat dikirim untuk menyederhanakan kompresi header (HPACK). Dalam praktiknya hal ini tidak terlihat oleh kode aplikasi karena setiap klien dan server HTTP/2 menormalisasinya untuk Anda, tetapi jika suatu saat Anda menginspeksi frame HTTP/2 mentah, header-nya akan semua kebab-case huruf kecil.
Matriks Keputusan Tujuh Bahasa
Cara tercepat menyelesaikan perdebatan penamaan adalah mengecek apa yang dipakai standard library bahasanya. Berikut matriksnya.
| Bahasa | Variabel | Fungsi | Kelas | Konstanta | Nama file | Kolom DB |
|---|---|---|---|---|---|---|
| Python (PEP 8) | snake_case | snake_case | PascalCase | CONSTANT_CASE | snake_case.py | snake_case |
| JavaScript/TS | camelCase | camelCase | PascalCase | CONSTANT_CASE | kebab-case.js | snake_case |
| Go | camelCase* | PascalCase** | PascalCase | mixedCase*** | snake_case.go | snake_case |
| Rust | snake_case | snake_case | PascalCase | SCREAMING_SNAKE | snake_case.rs | snake_case |
| Java | camelCase | camelCase | PascalCase | CONSTANT_CASE | PascalCase.java | snake_case |
| C# | camelCase† | PascalCase | PascalCase | PascalCase | PascalCase.cs | snake_case |
| SQL | n/a | snake_case | n/a | n/a | n/a | snake_case |
*Go: huruf pertama kecil berarti unexported (private dalam package); huruf pertama besar berarti exported (publik). Compiler memaksakan ini.**Go: fungsi exported memakai PascalCase (http.NewRequest); fungsi private package memakai camelCase (http.parseHeader).***Go: konstanta mengikuti aturan kapitalisasi exported/unexported yang sama —MaxRetriesuntuk exported,maxRetriesuntuk unexported. Go dengan sengaja menghindari CONSTANT_CASE.†C#: variabel lokal dan field private memakai camelCase (beberapa codebase memberi prefix_untuk field:_userName); properti publik, metode, dan tipe memakai PascalCase.
Tiga lapisan yang lintas bahasa:
HTML dan CSS: nama kelas dan ID memakai kebab-case (<div class="user-profile-card">). Atribut HTML kustom memakai kebab-case dengan prefix data- (data-user-id). Properti CSS inline memakai kebab-case (background-color); padanannya di DOM JS memakai camelCase (element.style.backgroundColor).
HTTP: nama header keluar memakai Header-Case untuk HTTP/1.1 ('Content-Type': 'application/json') dan kebab-case huruf kecil di kabel HTTP/2. Kebanyakan library fetch menerima salah satu ejaan dan menormalisasinya internal.
Environment variable: CONSTANT_CASE di mana-mana — Node, Python, Go, Rust, Bash, Docker, Kubernetes. Konvensi file .env pun sama: DATABASE_URL=postgres://....
Penanganan Akronim: Google vs Microsoft
Inilah pertanyaan penamaan paling kontroversial di code review. Harus parseUrl atau parseURL? userId atau userID? HtmlParser atau HTMLParser? XmlHttpRequest atau XMLHttpRequest?
Ada dua aliran, dan keduanya didukung otoritas dunia nyata.
Treat-acronym-as-word (Google, Apple, JS modern): parseUrl, userId, HtmlParser. Google JavaScript Style Guide §5.3 secara eksplisit merekomendasikannya. Apple Swift API Design Guidelines berbuat sama. Paket lodash dan change-case menghasilkan output ini secara default. Argumennya stabilitas round-trip: parseUrl di-tokenize rapi menjadi parse / url, dikonversi ke parse_url, dan kembali ke parseUrl tanpa kehilangan informasi. parseURL di-tokenize menjadi parse / URL, dikonversi ke parse_u_r_l oleh tokenizer naif atau parse_url oleh tokenizer yang acronym-aware — tetapi parse_url tidak bisa memutuskan apakah harus kembali ke parseUrl atau parseURL, karena ejaan semua huruf kecil telah kehilangan sinyal akronim.
Pertahankan kapitalisasi akronim (Microsoft, .NET, Java lama): parseURL, userID, HTMLParser, XMLHttpRequest. Microsoft .NET Naming Guidelines membatasi ini pada akronim 2-3 huruf (IO, URL, XML) dan memakai treat-as-word untuk yang lebih panjang (Html semestinya pertahankan-kapital menurut pembacaan ketat, tetapi dalam praktiknya Microsoft menulis HtmlAgilityPack). API Win32, BCL .NET, dan sebagian besar kode Java pra-2010 mengikuti gaya ini. Bacanya lebih natural untuk penutur Inggris — parseURL terbaca “parse U-R-L” — dengan ongkos hilangnya properti round-trip.
PEP 8 Python secara nominal merekomendasikan treat-as-word, tetapi standard library Python secara historis tidak konsisten: http.server.HTTPServer dan xml.etree.ElementTree mempertahankan akronim, dan json.JSONDecoder melakukan hal serupa. Tambahan baru (pathlib.PurePath, dataclasses) condong ke treat-as-word. Garis PEP 8 berbunyi: ikuti apa yang dipakai kode sekitar.
Sampel cepat pada korpus publik GitHub di awal 2026 (sample bigquery-public-data.github_repos di BigQuery, disaring ke file TypeScript dan JavaScript dari repo dengan 1k+ bintang) menunjukkan rasio sekitar 7:3 antara parseUrl dan parseURL, serta 6:4 antara userId dan userID. Gaya treat-as-word menang di JavaScript. C# tetap kuat di gaya Microsoft — parseURL mendominasi di file C#. Python betul-betul terbelah.
Aturan keputusan: (a) ikuti standard library bahasa yang Anda tulis; (b) saat standard library tidak konsisten, pilih treat-as-word untuk proyek greenfield karena round-trip-nya bersih; (c) tuliskan pilihan itu ke linter atau style config Anda dan jangan campur keduanya dalam satu proyek. Tokenizer Pengubah Case mengikuti konvensi treat-as-word agar selaras dengan lodash dan paket change-case — tempelkan XMLHttpRequest dan Anda akan melihat xmlHttpRequest, xml_http_request, xml-http-request sebagai output camelCase, snake_case, dan kebab-case.
Slug URL: Mengapa kebab-case Menang dari snake_case
Dokumentasi resmi Google Search Central tentang struktur URL memberi satu rekomendasi case yang spesifik: gunakan tanda hubung untuk memisahkan kata di URL, jangan gunakan underscore. Alasannya tokenisasi. Index pencarian Google membelah URL pada tanda hubung tetapi tidak pada underscore. https://example.com/buy-running-shoes di-tokenize menjadi buy, running, shoes — tiga istilah yang bisa diindeks dan cocok dengan salah satu kata kueri itu. https://example.com/buy_running_shoes di-tokenize sebagai satu istilah buy_running_shoes, yang hanya cocok dengan string persis itu.
Dampak praktisnya pada ranking memang kecil untuk halaman yang sudah mapan (Google punya banyak sinyal lain) tetapi nyata untuk halaman baru yang bersaing di SERP padat. Saat skor berimbang, URL kebab-case naik lebih tinggi.
Ada alasan kedua: case sensitivity. Jalur URL bersifat case-sensitive di server Linux (mayoritas web). /User-Profile dan /user-profile adalah dua URL berbeda, dua entri cache berbeda, dua baris analytics berbeda. kebab-case huruf kecil adalah satu-satunya ejaan yang tidak mengundang bug “tapi di Mac saya jalan kok.”
Resep slug empat langkah yang berlaku untuk semua judul:
- Ubah semuanya jadi huruf kecil.
- Ganti deretan spasi dan tanda baca dengan satu tanda hubung.
- Hilangkan tanda hubung di awal dan akhir.
- Opsional, buang stop word (
a,an,the,of,for) untuk URL lebih pendek — lakukan ini hanya jika CMS Anda tetap menyimpan judul asli untuk heading halaman.
Contoh dikerjakan: "10 Tips for Faster JavaScript: A Complete Guide" → 10-tips-faster-javascript-complete-guide. Titik dua dan stop word (for, a) dibuang; hasilnya 39 karakter, nyaman di bawah sweet spot 50-60 karakter untuk tampilan SERP. Untuk lebih banyak tentang panjang URL dan interaksinya dengan batas karakter platform, lihat Panduan batas karakter dan kata.
Pengubah Case memberi Anda output kebab-case untuk judul apa pun hanya dengan satu tempel — berguna saat Anda membuat slug secara massal untuk migrasi CMS atau sitemap.
Enam Jebakan Konversi
Konversi otomatis antar case terlihat sepele. Tidak. Berikut enam titik gagalnya.
1. Batas angka-huruf
Apa jadinya file2x setelah konversi snake_case? Konvensi arus utama — lodash, change-case, PEP 8, Pengubah Case — memperlakukan setiap transisi huruf↔digit sebagai batas token, sehingga file2x menjadi file / 2 / x dan ber-snake_case jadi file_2_x. parseUTF8 menjadi parse / utf / 8 dan parse_utf_8.
Beberapa library lama (dan beberapa cuplikan re.sub tulisan tangan yang Anda temukan di Stack Overflow) melewati aturan ini dan menghasilkan file2x → file2x atau parseutf8. Ketidakcocokan ini baru muncul ketika Anda memigrasikan kode antar library, dan gejalanya: “separuh identifier saya ter-rename dan separuhnya tidak.” Pilih satu tokenizer, verifikasi ia mengikuti aturan batas-digit, lalu konsisten dengan pilihan itu.
2. Huruf kapital berurutan
Regex batas akronim adalah /([A-Z]+)([A-Z][a-z])/ — belah antara deretan huruf kapital dan satu huruf kapital terakhir yang memulai kata baru. XMLHttpRequest cocok sebagai XML + HttpRequest, lalu Http + Request, menghasilkan token XML / Http / Request.
Perjalanan baliknya yang menggigit: XML / Http / Request ber-PascalCase ulang menjadi XmlHttpRequest, bukan XMLHttpRequest. Akronim itu ter-title-case. Ini perilaku standar karena alternatifnya — mengingat token mana yang awalnya akronim — memerlukan metadata di luar jalur yang tidak dimiliki tokenizer. Jika codebase Anda bergaya XMLHttpRequest dan Anda menjalankan rename project-wide melalui konverter treat-as-word, Anda akan diam-diam menulis ulang setiap akronim. Uji di branch terpisah lebih dulu, atau pakai tokenizer yang membiarkan Anda menandai akronim secara eksplisit.
3. Pemetaan case Unicode dan locale-aware
'I'.toLowerCase() di JavaScript biasanya mengembalikan 'i'. Jalankan panggilan yang sama dengan locale Turki aktif dan hasilnya 'ı' (i tanpa titik, U+0131), karena bahasa Turki punya dua huruf i yang berbeda dan huruf kecil dari kapital-I adalah yang tanpa titik. Bug tunggal ini sudah lolos di banyak peluncuran internasionalisasi — form login yang meng-uppercase username untuk perbandingan diam-diam mengunci pengguna ber-locale Turki bernama İrem.
Dua ranjau lagi: ß.toUpperCase() Jerman mengembalikan 'SS' — satu karakter menjadi dua, dan setiap kode yang menganggap konversi case mempertahankan panjang string itu keliru. Σ.toLowerCase() Yunani bergantung pada konteks: σ di tengah kata, ς di akhir kata.
Perbaikan: gunakan toLocaleLowerCase() dan toLocaleUpperCase() dengan locale eksplisit, atau — bila Anda tidak tahu locale pengguna — kirim 'en-US' untuk mendapat perilaku yang kompatibel dengan ASCII. Pengubah Case memakai metode yang Intl-aware sehingga ketiga input itu ditangani dengan benar. Untuk sisi regex-nya, Lembar contekan Regex mencakup kelas huruf Unicode \p{L}.
4. Polusi smart-quote
Tempelkan string dari Microsoft Word, Google Docs, atau macOS Notes ke konverter case dan Anda bisa membawa penumpang gelap: U+2018 / U+2019 / U+201C / U+201D (curly quote), U+2014 (em dash), U+00A0 (non-breaking space), U+200B (zero-width space). Keempatnya terlihat identik dengan padanan ASCII-nya di kebanyakan font tetapi encoding-nya berbeda. Identifier camelCase yang mengandung U+00A0 akan compile di beberapa bahasa dan tidak di bahasa lain, lalu grep Anda untuk nama variabel itu akan diam-diam melewatkan kemunculannya.
Pertahanannya: normalisasi input sebelum di-tokenize. Satu baris input.normalize('NFKC').replace(/[“”‘’]/g, '"') menghapus sebagian besar pengganggu. Atau pakai pendekatan Panduan pembanding teks — diff-kan string yang dicurigai dengan kembarannya yang ASCII murni dan temukan karakter tak kasat mata itu di tampilan hex.
5. URL sebaiknya tidak di-snake_case
https://example.com/api/users yang ditempel ke konverter snake_case menghasilkan https_example_com_api_users. Secara teknis identifier snake_case yang valid; secara semantik bencana. URL sudah berada dalam case canonical-nya (path/case dengan segmen jalur kebab-case huruf kecil), dan memperlakukan seluruh URL sebagai satu identifier menghapus informasi strukturalnya.
Solusinya parse URL, ekstrak segmen jalur, lalu konversi tiap segmen secara terpisah jika memang dibutuhkan. Pengubah Case dengan sengaja tidak meng-auto-parse URL karena menebak niat pengguna lebih berbahaya ketimbang menjadi harfiah — tempel URL, dapatkan konversi harfiah; jika Anda ingin perilaku segmen-per-segmen, lakukan sendiri.
6. dot.case versus akses properti
String user.profile.image adalah dua hal berbeda bergantung konteks. Sebagai identifier dot.case di file TOML, ia satu nama dengan tiga segmen. Sebagai ekspresi JavaScript, ia properti image dari properti profile dari user.
Jika Anda menyalin string dot.case keluar dari file konfigurasi dan menempelnya ke konsol JavaScript, runtime akan mengevaluasinya sebagai rantai properti dan entah error atau mengembalikan sesuatu yang mengejutkan. Sebaliknya, kode yang memanipulasi string jalur properti JS ('a.b.c'.split('.')) terkadang akhirnya menangani identifier dot.case dari tempat lain dan memperlakukannya sebagai jalur yang lebih dalam dari yang dimaksud. Keduanya harus tetap terpisah secara namespace.
Konvensi: string dot.case berada di dalam data (file konfigurasi, jalur MongoDB, kunci log); kode identifier tunggal memakai camelCase atau snake_case; jika butuh struktur hierarkis di kode, pakai objek bersarang dan sintaks dot-property bahasa host.
Resep Migrasi Lintas Bahasa
camelCase JS ke snake_case Python
Alur paling cepat: salin identifier JS, tempel ke konverter, salin output snake_case. Untuk konversi level kode secara massal:
import { snakeCase } from 'change-case';
snakeCase('parseHTML'); // 'parse_html'
snakeCase('XMLHttpRequest'); // 'xml_http_request'
snakeCase('parseUTF8'); // 'parse_utf_8'
snakeCase('iPhone'); // 'i_phone'Yang terakhir itu jebakannya — iPhone nama merek dengan batas camelCase yang menyesatkan. Untuk nama merek dan segelintir identifier historis, edit dengan tangan setelah konversi.
snake_case SQL ke respons API JS/Java
Kebanyakan ORM melakukan ini untuk Anda secara otomatis. Sequelize punya underscored: true, TypeORM punya kelas SnakeNamingStrategy, Hibernate punya ImplicitNamingStrategyComponentPathImpl. Pemetaan default-nya adalah user_profile_id ↔ userProfileId.
Yang patah: kolom yang membawa akronim. Kolom bernama http_status_code round-trip ke httpStatusCode dengan bersih, tetapi jika codebase Anda lebih suka HTTPStatusCode, ORM akan melawan Anda. Pilihannya: ubah nama kolom jadi httpstatuscode_code (jelek), konfigurasikan ORM untuk mempertahankan akronim (jarang), atau terima konvensi standarnya.
Komponen PascalCase React ke kelas kebab-case CSS
// UserProfileCard.tsx
export function UserProfileCard({ user }) {
return <div className="user-profile-card">{user.name}</div>;
}/* UserProfileCard.module.css */
.user-profile-card { padding: 1rem; }
.user-profile-card__avatar { border-radius: 50%; }
.user-profile-card--featured { background: gold; }BEM (Block Element Modifier) adalah konvensi kelas CSS paling umum yang berpasangan dengan React: block adalah nama komponen dalam kebab-case, element adalah block__element, modifier adalah block--modifier. Di tingkat file: UserProfileCard.tsx untuk komponen, UserProfileCard.module.css untuk style yang ter-scope — keduanya PascalCase, selaras dengan nama komponen.
Environment variable ke konfigurasi aplikasi
# .env (CONSTANT_CASE)
DATABASE_URL=postgres://localhost/myapp
MAX_RETRIES=3
LOG_LEVEL=info// Node.js
const dbUrl = process.env.DATABASE_URL;
const maxRetries = parseInt(process.env.MAX_RETRIES, 10);# Python
import os
db_url = os.environ['DATABASE_URL']
max_retries = int(os.environ['MAX_RETRIES'])Nama variabel env tetap CONSTANT_CASE; identifier di sisi aplikasi mengikuti konvensi variabel bahasanya. Kunci konfigurasi YAML/TOML lazimnya snake_case (database_url, max_retries) meskipun mereka memetakan ke env var CONSTANT_CASE yang sama saat runtime — framework seperti Spring, dotenv, dan Pydantic menangani pemetaan case untuk Anda.
Perbandingan Library dan Tool
| Tool | Bahasa | Case yang didukung | Perilaku tokenizer |
|---|---|---|---|
lodash (_.camelCase, dll.) | JavaScript | 4 utama + startCase | Treat-acronym-as-word |
Paket npm change-case | JavaScript/TS | Semua 8 case pemrograman | Treat-acronym-as-word |
inflection (Python) | Python | camelCase / snake_case | Treat-acronym-as-word |
Crate convert_case | Rust | 12+ case | Akronim bisa dikonfigurasi |
strings + regex Go | Go | Buat sendiri | Ditentukan proyek |
| VS Code (bawaan) | Editor | UPPER / lower / Title saja | Hanya whitespace |
| Ekstensi “change-case” VS Code | Editor | Semua 8 case pemrograman | Treat-acronym-as-word |
| Pengubah Case | Browser | 15 case (7 teks + 8 kode) | Treat-acronym-as-word |
Untuk kode harian, pasang change-case (JS) atau convert_case (Rust). Untuk Python, paket inflection adalah pilihan kanonik tetapi regex tulisan tangan kecil sudah mencakup 90% kasus. Untuk konversi sekali pakai saat code review atau refactor, Pengubah Case menampilkan semua 15 output sekaligus dalam satu tempel sehingga Anda bisa membandingkannya langsung. Jika Anda juga perlu menghitung token atau memvalidasi panjang identifier, Penghitung Kata mengurus sisi itu; untuk memverifikasi regex tokenizer, gunakan Penguji Regex dengan pola dari lembar contekan yang ditautkan di atas.
FAQ
Apa beda camelCase dan PascalCase?
camelCase diawali huruf kecil (userProfile); PascalCase diawali huruf besar (UserProfile). Keduanya mengapitalkan tiap kata berikutnya tanpa separator. camelCase adalah konvensi untuk variabel dan fungsi di kebanyakan bahasa keluarga C; PascalCase adalah konvensi untuk kelas, tipe, dan komponen React.
Mengapa Python pakai snake_case tetapi JavaScript pakai camelCase?
Python (1991) mewarisi snake_case dari C dan bahasa ABC, lalu PEP 8 mengukuhkannya sebagai standar komunitas. JavaScript (1995) menyalin gaya camelCase dari Java, dan Java telah mewarisi camelCase dari Smalltalk. Keduanya ketergantungan jalur historis. Tidak ada konvensi yang secara teknis lebih baik — studi keterbacaan kira-kira seri — dan konsistensi dalam satu ekosistem lebih penting ketimbang pilihannya sendiri.
Sebaiknya pakai parseUrl atau parseURL untuk akronim di camelCase?
parseUrl (treat-acronym-as-word) adalah default modern — dipakai Google, Apple, lodash, dan paket npm change-case. parseURL (preserve-acronym-caps) adalah gaya Microsoft .NET dan mendominasi di kode C#. Untuk proyek baru di JavaScript, TypeScript, atau Swift, pilih parseUrl karena ia round-trip dengan bersih melalui konversi snake_case dan kebab-case. Apa pun pilihan Anda, kunci di linter.
Apakah kebab-case lebih baik dari snake_case untuk URL?
Ya. Panduan resmi Google Search Central adalah memakai tanda hubung, bukan underscore, di URL. Pengindeks pencarian membelah token pada tanda hubung tetapi tidak pada underscore: /user-profile diindeks sebagai user + profile, sedangkan /user_profile diindeks sebagai satu istilah user_profile. Dampak ranking per halaman memang kecil tetapi nyata, dan URL kebab-case huruf kecil juga menghindari bug case-sensitivity di server Linux.
Case apa yang harus dipakai untuk nama kolom basis data?
snake_case. Setiap ORM besar (SQLAlchemy, Hibernate, Sequelize, TypeORM, Active Record) memakainya sebagai default, dan setiap dialek SQL besar menanganinya secara identik. PostgreSQL melipat identifier tak ber-quote ke huruf kecil, MySQL case-sensitive di Linux dan case-insensitive di macOS/Windows, dan SQLite memperlakukan nama sebagai opaque. snake_case huruf kecil adalah satu-satunya ejaan yang berperilaku sama di mana-mana.
Bolehkah mencampur konvensi penamaan dalam satu proyek?
Boleh — dan biasanya memang harus. Aplikasi web tipikal mungkin memakai camelCase untuk variabel JS, snake_case untuk basis data, kebab-case untuk kelas CSS dan URL, dan CONSTANT_CASE untuk env var. Aturannya: “satu konvensi per lapisan, jangan campur dalam satu lapisan.” Kunci pilihan per lapisan ini di linter atau style guide agar review PR tidak lagi memperdebatkannya.
Bagaimana mengonversi antar case secara programatik?
Untuk JavaScript dan TypeScript, pasang change-case atau pakai _.camelCase / _.snakeCase / _.kebabCase dari lodash. Untuk Python, paket inflection atau regex pendek (re.sub(r'(?<!^)(?=[A-Z])', '_', s).lower() untuk PascalCase ke snake_case). Untuk Rust, crate convert_case. Untuk konversi interaktif sekali pakai, Pengubah Case menampilkan semua 15 output case untuk input apa pun dalam satu halaman browser.
Apakah CONSTANT_CASE hanya untuk environment variable?
Tidak, tetapi env var adalah penggunaan paling umum. CONSTANT_CASE cocok untuk semua “invarian runtime”: MAX_RETRIES, API_BASE_URL, DEFAULT_PAGE_SIZE, nilai enum, definisi makro, konstanta konfigurasi level atas. Aturannya: “kalau nilai ini diubah saat runtime apakah jadi bug?” — kalau ya, CONSTANT_CASE; kalau tidak, pakai konvensi variabel biasa bahasanya. const result = await fetch(url) baik-baik saja apa adanya.
Apa beda dot.case dan path/case?
dot.case memakai . sebagai separator (user.profile.image) dan merepresentasikan kunci hierarkis di dalam data: paket Java, jalur field MongoDB, kunci konfigurasi TOML, jalur get/set Lodash. path/case memakai / (user/profile/image) dan merepresentasikan lokasi nyata: jalur URL, jalur filesystem, ref Git. Pilihan titik-versus-garis-miring menandai “label data” lawan “lokasi sesungguhnya.”
Lembar Keputusan 30 Detik
Tiga aturan yang mencakup 95% pertanyaan:
-
Untuk identifier kode, salin standard library bahasa Anda. Python: snake_case untuk variabel dan fungsi, PascalCase untuk kelas. JavaScript dan TypeScript: camelCase untuk variabel dan fungsi, PascalCase untuk kelas dan komponen. Go: huruf pertama kecil untuk private-package, huruf pertama besar untuk exported. Rust: snake_case untuk variabel dan fungsi, PascalCase untuk tipe, SCREAMING_SNAKE untuk konstanta.
-
Untuk lapisan lintas potong, case-nya tetap terlepas dari bahasa. URL memakai kebab-case. Kelas CSS memakai kebab-case. Nama kolom basis data memakai snake_case. Environment variable memakai CONSTANT_CASE. Header HTTP/1.1 memakai Header-Case (HTTP/2 menormalisasi ke huruf kecil di kabel).
-
Tuliskan pilihan ke linter sekali, lalu berhenti berdebat. ESLint, Pylint, Clippy, golangci-lint, dan Rubocop semuanya punya aturan untuk ini. Pilih konvensinya, konfigurasikan linter, lalu review PR berikutnya tidak lagi habiskan sepatah kata pun untuk
userIDversususerId.
Saat Anda memang butuh mengonversi antar case — untuk refactor, migrasi CMS, pemetaan SQL-ke-API — Pengubah Case memberi semua 15 output case dalam satu tempel sehingga Anda bisa menyalin yang tepat tanpa mem-tokenize input secara manual. Untuk pekerjaan teks terkait, lihat Penghitung Kata, Penguji Regex, dan Bandingkan Teks Online. Untuk bacaan lebih dalam, Lembar contekan Regex mencakup pola tokenizer, Panduan pembanding teks mencakup perbandingan before/after saat migrasi, dan Panduan batas karakter dan kata mencakup anggaran panjang URL untuk slug SEO.