Perkara yang Anda Mungkin Tidak Tahu Mengenai Pembolehubah CSS - Peraturan Penamaan dan Tugasan Nilai

Dalam penerokaan pembolehubah CSS saya, saya menemui banyak potensi menarik dan butiran halus yang tidak selalu kelihatan pada pandangan pertama. Seperti kebanyakan pembangun, saya pada mulanya menggunakan pembolehubah CSS dengan cara yang mudah dan mudah, jarang menghadapi kes kelebihan. Pendekatan ini biasa dan berkesan untuk pelbagai tujuan, tetapi ini bermakna terdapat banyak lagi untuk diterokai dan dicuba. Pada pandangan saya, memperoleh pemahaman yang lebih mendalam tentang peraturan penamaan pembolehubah CSS dan penetapan nilai yang sah boleh mengembangkan julat dan fleksibiliti aplikasinya dengan ketara.

Saya telah mengumpulkan penyelidikan dan cerapan saya di sini, bertujuan untuk memberikan pandangan yang lebih teliti dan menyeluruh pada pembolehubah CSS. Harapan saya ialah artikel ini akan menjadi sumber untuk membantu anda dan saya sendiri membuka kunci potensi penuh pembolehubah CSS dan menemui kemungkinan baharu dalam penggayaan.

Siri ini menganggap anda sudah biasa dengan asas pembolehubah CSS, seperti sintaks nilai --name: dan fungsi var(--name) atau anda selesa dengan konsep asas diliputi dalam sepertiga pertama Pengenalan Pembolehubah CSS ini.

Peraturan Penamaan

Apabila menggunakan pembolehubah CSS, penamaan ialah langkah penting pertama. Berikut ialah beberapa garis panduan utama untuk menamakan pembolehubah CSS:

Awalan Asas

Semua nama sifat tersuai mesti bermula dengan dua sempang (--), contohnya, --warna-utama. Awalan ini membantu penyemak imbas membezakan sifat tersuai daripada sifat CSS asli, mengurangkan kemungkinan konflik.

Sensitiviti Kes

Nama sifat tersuai CSS adalah sensitif huruf besar-besaran, bermakna --warna-utama dan --Warna-Utama dianggap sebagai dua pembolehubah yang sama sekali berbeza. Adalah penting untuk mengekalkan selongsong yang konsisten di seluruh kod anda untuk mengelakkan tersilap merujuk pembolehubah dengan kes yang tidak sepadan, yang boleh membawa kepada ralat penghuraian.

Contoh:

   :root {
     --main-color: blue;
     --Main-Color: red; /* Case difference, treated as a separate property */
   }

   .box1 {
     color: var(--main-color); /* Refers to --main-color, resulting in blue */
   }

   .box2 {
     color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
   }

Perkataan Terpelihara:

Kendiri -- dikhaskan dan mungkin mempunyai tujuan khusus dalam spesifikasi masa hadapan. Oleh itu, elakkan menggunakannya sebagai nama harta tersuai.
Contoh:

   :root {
     --: green; /* Invalid: a standalone -- is reserved */
     --custom-color: green; /* Valid: custom property avoids reserved name */
   }

   .text {
     color: var(--custom-color); /* Uses the custom property */
   }

Sekatan Penamaan:

Apabila menamakan pembolehubah CSS, adalah penting untuk mempertimbangkan aksara dan konvensyen yang dibenarkan, yang meningkatkan kebolehbacaan dan mengelakkan konflik.

1. Watak Dibenarkan:
   • Watak Abjad: Huruf Inggeris besar dan huruf kecil (A-Z, a-z)
   • Nombor: 0-9
   • Sempang: -
   • Skor bawah: _
   • Aksara Unikod: Emoji atau aksara bukan Latin (julat Unikod U 0080 dan ke atas)
2. Meloloskan Diri Watak Istimewa: Jika nama pembolehubah termasuk aksara khas (seperti & atau ?), ia boleh diwakili menggunakan aksara melarikan diri () atau kod Unicode. Contohnya, & boleh ditulis sebagai 26. (Rujuk Sintaks dan jenis data asas - Aksara dan huruf besar untuk butiran lanjut).
3. Panjang Boleh Ubah: Walaupun tiada had ketat pada panjang nama berubah, untuk kebolehbacaan, adalah disyorkan untuk mengekalkan nama di bawah 50 aksara. Saya melakukan beberapa percubaan dengan Chromium, ia boleh menyokong panjang nama berubah sehingga 1 juta aksara.

Contoh
Contoh berikut menunjukkan fleksibiliti penamaan pembolehubah CSS dan cara mengendalikan aksara khas dengan betul:

   :root {
     --main-color: blue;
     --Main-Color: red; /* Case difference, treated as a separate property */
   }

   .box1 {
     color: var(--main-color); /* Refers to --main-color, resulting in blue */
   }

   .box2 {
     color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
   }

Menetapkan Nilai

Pembolehubah CSS boleh menyimpan pelbagai jenis nilai, tetapi ia juga perlu mengikut peraturan sintaks tertentu. Mari lihat beberapa contoh penetapan nilai yang sah:

   :root {
     --: green; /* Invalid: a standalone -- is reserved */
     --custom-color: green; /* Valid: custom property avoids reserved name */
   }

   .text {
     color: var(--custom-color); /* Uses the custom property */
   }

Seperti yang ditunjukkan oleh contoh ini, pembolehubah CSS menyokong pelbagai nilai. Walau bagaimanapun, memandangkan pembolehubah CSS adalah sebahagian daripada sifat CSS, ia mesti mengikut sintaks CSS umum, seperti petikan dan kurungan yang sepadan. Mari terokai beberapa nilai yang tidak memenuhi keperluan ini.

Nilai Tidak Sah

Menetapkan nilai tidak sah kepada pembolehubah CSS boleh menyebabkan ralat penghuraian, yang boleh membawa kepada isu dalam gaya seterusnya. Berikut ialah beberapa contoh penetapan nilai tidak sah:

   :root {
     /* Naming with Unicode characters */
     --primary-color: #3498db;
     --secondary-color: #e74c3c;

     /* Using an Emoji as a variable name */
     --?: #2ecc71;

     /* Special characters with escape sequences, resulting in --B&W? */
     --B\&W\?: #2ecc72;

     /* Using Unicode escape codes, equivalent to --B&W? */
     --BWF: #abcdef;
   }

   .container {
     color: var(--BWF); /* Result is #abcdef */
   }

   .container-alt {
     color: var(--B\&W\?); /* Result is #abcdef */
   }

Menggunakan !penting

Pembolehubah CSS, seperti sifat CSS lain, menyokong bendera !penting, yang mempengaruhi keutamaan. Berikut ialah contoh yang menunjukkan cara !penting mempengaruhi keutamaan pembolehubah:

:root {
  --foo: if(x > 5) this.width = 10;
  --string-with-semicolon: "font-size: 16px;"; /* Strings can include semicolons */
  --complex-calc: calc(100% / 3 + 20px);       /* Complex calculations with calc() */
  --negative-value: -10px;                     /* Negative values */
  --multiple-values: 10px 20px 30px 40px;      /* Multiple values, e.g., for margin or padding */
  --unitless-number: 1.5;                      /* Unitless numbers */
  --nested-var: var(--string-with-semicolon);  /* Nested variables using var() */
  --empty-string: ;                            /* Empty string */
  --color: rgba(255, 0, 0, 0.5);               /* Color functions */
  --special-chars: "Content: \"Hello\"";       /* Strings with special characters */
}

Dalam contoh ini, kedua-dua #target dan .cls mempengaruhi pembolehubah --text-color pada div. Mengikut kekhususan pemilih, #target harus mengatasi .cls. Walau bagaimanapun, kerana --text-color dalam .cls menggunakan !important, warna akhir yang digunakan pada div akan menjadi hijau. Adalah penting untuk ambil perhatian bahawa !important hanya memberi kesan kepada keutamaan antara pembolehubah dan tidak menyebarkan kepada sifat yang merujuk pembolehubah. Warna yang terhasil hanyalah hijau, bukan hijau !penting.

Menggunakan permulaan

   :root {
     --main-color: blue;
     --Main-Color: red; /* Case difference, treated as a separate property */
   }

   .box1 {
     color: var(--main-color); /* Refers to --main-color, resulting in blue */
   }

   .box2 {
     color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
   }

Menggunakan parap sebagai nilai pembolehubah CSS ialah gelagat yang unik. Apabila ditugaskan kepada pembolehubah, permulaan menjadikan pembolehubah itu tidak sah, menyebabkannya gagal apabila diakses dengan var(). Ini berbeza daripada nilai kosong (--empty: ;), yang tidak akan menyebabkan harta menjadi tidak sah. Menggunakan permulaan secara berkesan "menetapkan semula" pembolehubah, membatalkan definisinya. (Rujukan)

Kitaran Kebergantungan

Pembolehubah CSS menyokong rujukan pembolehubah lain, tetapi jika kitaran pergantungan berlaku, semua pembolehubah dalam kitaran menjadi tidak sah. Berikut ialah contoh kitaran pergantungan:

   :root {
     --: green; /* Invalid: a standalone -- is reserved */
     --custom-color: green; /* Valid: custom property avoids reserved name */
   }

   .text {
     color: var(--custom-color); /* Uses the custom property */
   }

Dalam contoh ini, --satu, --dua, dan --tiga merujuk satu sama lain, mencipta kitaran. Akibatnya, ketiga-tiga pembolehubah menjadi tidak sah disebabkan oleh pergantungan bulat, yang menghalangnya daripada menyelesaikan. (Rujukan)

Kesimpulan

Dalam artikel ini, kami telah mendalami peraturan penamaan dan penetapan nilai untuk pembolehubah CSS, meliputi cara mentakrif dan mengurus pembolehubah ini dengan betul sambil mengelakkan ralat penghuraian biasa. Dengan pengetahuan asas ini, anda seharusnya dapat menggunakan pembolehubah CSS dengan lebih berkesan dalam projek pembangunan masa hadapan anda.

Artikel seterusnya akan meneroka cara menggunakan var() untuk mendapatkan semula nilai pembolehubah CSS, bersama-sama dengan senario aplikasi khusus untuk menjadikan penggunaan pembolehubah CSS anda lebih fleksibel dan berkuasa.

Atas ialah kandungan terperinci Perkara yang Anda Mungkin Tidak Tahu Mengenai Pembolehubah CSS - Peraturan Penamaan dan Tugasan Nilai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!