Konvensi Penamaan Token
Susun nama token secara hierarkis menggunakan tingkatan penamaan global, alias, dan khusus komponen.
Konvensi Penamaan Token adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Mengapa Penamaan Penting
Nama token yang tidak konsisten membuat Anda tidak dapat memperkirakan fungsi token tanpa membaca nilainya. Konvensi penamaan yang jelas dan mudah diprediksi merupakan dasar sistem token yang dapat diskalakan.
Pola Kategori-Properti-Varian
Pola yang umum: [category]-[property]-[variant]. Contoh: color-text-primary, color-text-secondary, spacing-inset-sm. Setiap segmen mempersempit makna secara bertahap.
Nama Semantik vs Palet
Hindari nama palet seperti blue-500 dalam komponen. Gunakan nama semantik: color-action-default, color-feedback-error. Nama semantik tetap sesuai meskipun warna merek berubah, tanpa memerlukan pembaruan komponen.
Pengubah Status
Tambahkan status di bagian akhir: color-button-bg-default, color-button-bg-hover, color-button-bg-disabled. Akhiran status yang konsisten membuat kumpulan token mudah diprediksi dan lengkap.
Penamaan Skala
Gunakan ukuran kaus (xs, sm, md, lg, xl) atau skala numerik (100, 200...900) secara konsisten. Skala numerik memungkinkan penyisipan nilai di antara nilai yang ada; ukuran kaus lebih mudah dipahami manusia untuk kumpulan kecil.
Awalan Ruang Nama
Untuk sistem mult merek atau multiproduk, awali token dengan ruang nama: brand-a-color-primary vs brand-b-color-primary. Ruang nama mencegah bentrokan saat menggabungkan kumpulan token.
Keluaran Variabel CSS
Format tanda hubung diterjemahkan langsung menjadi properti kustom CSS: color-text-primary menjadi --color-text-primary. Token dengan format huruf kapital di tengah memerlukan transformasi; token dengan format tanda hubung tidak.
Dokumentasi sebagai Bagian dari Penamaan
Nama yang baik menjelaskan dirinya sendiri: spacing-stack-md (jarak vertikal antara elemen yang ditumpuk, sedang) menyampaikan maksud tanpa komentar. Nama buruk seperti s3 memerlukan dokumentasi eksternal agar dapat dipahami.
Menghindari Perubahan yang Merusak
Setelah token digunakan, perubahan nama merupakan perubahan yang merusak. Gunakan alias penghentian: pertahankan nama lama, tetapi arahkan ke token baru. Berikan waktu migrasi kepada pengguna sebelum menghapus token yang dihentikan.
Penegakan dengan Alat
Periksa nama token menggunakan aturan khusus di Style Dictionary atau skrip integrasi berkelanjutan. Tolak token yang tidak sesuai dengan pola penamaan. Penegakan otomatis mencegah penyimpangan penamaan seiring berkembangnya sistem.
Penyelarasan Tim
Publikasikan panduan penamaan dengan contoh nama yang benar dan salah. Adakan lokakarya singkat agar tim desain dan rekayasa menyepakati konvensi sebelum sistem berkembang. Konsistensi memerlukan pemahaman bersama, bukan sekadar dokumentasi.
Pemeriksaan Pengetahuan
Mengapa token komponen sebaiknya menggunakan nama semantik, bukan nama palet seperti "blue-500"?
Ringkasan
Konvensi penamaan token yang konsisten dengan pola kategori-properti-varian, nama semantik, sufiks status, dan prefiks ruang nama membuat sistem token mudah diprediksi, mendokumentasikan dirinya sendiri, serta tahan terhadap perubahan merek tanpa merusak kode komponen.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Konvensi Penamaan Token” gratis?
Ya — teks lengkap “Konvensi Penamaan Token” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Konvensi Penamaan Token”?
Susun nama token secara hierarkis menggunakan tingkatan penamaan global, alias, dan khusus komponen. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Konvensi Penamaan Token” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Apa Itu Token Desain
- Konvensi Penamaan Token
- Menerapkan Tema Multi-Merek dengan Variabel CSS
- Peralatan Token: Style Dictionary