Konvensyen Penamaan Token
Susun nama token secara hierarki menggunakan peringkat penamaan global, alias dan khusus komponen.
Konvensyen Penamaan Token ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Mengapa Penamaan Penting
Nama token yang tidak konsisten menjadikannya mustahil untuk meramalkan fungsi token tanpa membaca nilainya. Konvensyen penamaan yang jelas dan boleh diramal ialah asas kepada sistem token yang boleh diskalakan.
Corak Kategori-Sifat-Varian
Corak biasa: [category]-[property]-[variant]. Contoh: color-text-primary, color-text-secondary, spacing-inset-sm. Setiap segmen memperincikan makna secara berperingkat.
Nama Semantik berbanding Nama Palet
Elakkan nama palet seperti blue-500 dalam komponen. Gunakan nama semantik: color-action-default, color-feedback-error. Nama semantik kekal sesuai selepas perubahan warna jenama tanpa memerlukan kemas kini komponen.
Pengubah Keadaan
Tambahkan keadaan pada hujung: color-button-bg-default, color-button-bg-hover, color-button-bg-disabled. Akhiran keadaan yang konsisten menjadikan set token mudah diramal dan lengkap.
Penamaan Skala
Gunakan saiz kemeja-T (xs, sm, md, lg, xl) atau skala berangka (100, 200...900) secara konsisten. Skala berangka membolehkan penyisipan nilai perantaraan; saiz kemeja-T lebih mudah difahami manusia untuk set yang kecil.
Awalan Ruang Nama
Untuk sistem berbilang jenama atau berbilang produk, tambahkan awalan ruang nama pada token: brand-a-color-primary berbanding brand-b-color-primary. Ruang nama menghalang pertembungan apabila set token digabungkan.
Hasil Pemboleh Ubah CSS
Format kebab-case diterjemahkan terus kepada sifat tersuai CSS: color-text-primary menjadi --color-text-primary. Token camel-case memerlukan transformasi; token kebab-case tidak memerlukannya.
Dokumentasi sebagai Sebahagian daripada Penamaan
Nama yang baik menerangkan dirinya sendiri: spacing-stack-md (jarak menegak antara elemen yang disusun, sederhana) menyampaikan maksud tanpa komen. Nama yang kurang baik seperti s3 memerlukan dokumentasi luaran untuk difahami.
Mengelakkan Perubahan yang Memecahkan Keserasian
Apabila token mula digunakan, penamaan semula menjadi perubahan yang memecahkan keserasian. Gunakan alias usang: kekalkan nama lama tetapi jadikan ia merujuk token baharu. Berikan tempoh migrasi kepada pengguna sebelum membuang token yang telah ditamatkan.
Penguatkuasaan melalui Alat
Semak nama token menggunakan peraturan tersuai dalam Style Dictionary atau skrip CI. Tolak token yang tidak sepadan dengan corak penamaan. Penguatkuasaan automatik menghalang penyimpangan penamaan apabila sistem berkembang.
Penyelarasan Pasukan
Terbitkan panduan penamaan dengan contoh nama yang betul dan salah. Jalankan bengkel ringkas supaya pasukan reka bentuk dan kejuruteraan bersetuju tentang konvensyen sebelum sistem berkembang. Konsistensi memerlukan pemahaman bersama, bukan sekadar dokumentasi.
Semakan Pengetahuan
Mengapakah token komponen patut menggunakan nama semantik dan bukannya nama palet seperti "blue-500"?
Ringkasan
Konvensyen penamaan token yang konsisten menggunakan corak kategori-sifat-varian, nama semantik, akhiran keadaan dan awalan ruang nama menjadikan sistem token mudah dijangka, menerangkan dirinya sendiri serta tahan terhadap perubahan jenama tanpa merosakkan kod komponen.
Pelajari CSS dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Konvensyen Penamaan Token” percuma?
Ya — teks penuh “Konvensyen Penamaan Token” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Konvensyen Penamaan Token”?
Susun nama token secara hierarki menggunakan peringkat penamaan global, alias dan khusus komponen. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Konvensyen Penamaan Token” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Apakah Token Reka Bentuk
- Konvensyen Penamaan Token
- Melaksanakan Pemetaan Tema Berbilang Jenama dengan Pemboleh Ubah CSS
- Alatan Token: Style Dictionary