Wawancara Frontend: Bagaimana CSS @functions Menggunakan Kembali Token Desain?

1. Perintah dan cakupan

Sebuah sistem desain memiliki token spasi, dan komponen menghitung padding dari kepadatan dan lebar kontainer. Tim menginginkan lebih sedikit ekspresi calc() yang berulang sambil tetap mempertahankan CSS murni, penimpaan tema, dan perilaku pada browser lama. Rancang solusinya dengan @function CSS dan jelaskan fallback yang aman.

2. Apa yang sedang diuji oleh pewawancara

• Memahami bahwa @function mendefinisikan fungsi kustom CSS yang namanya merupakan dashed-ident yang diawali dengan --.
• Mendeklarasikan parameter, nilai default, tipe opsional, dan result, sambil mengetahui bahwa bodinya tidak mengembalikan nilai seperti JavaScript pada deklarasi pertama.
• Membedakan fungsi kustom, custom property, fungsi waktu-bangun Sass, dan cascading saat runtime.
• Menangani deteksi fitur, pewarisan tema, siklus, kompatibilitas, dan peningkatan progresif yang aksesibel.

3. Pertanyaan untuk diklarifikasi terlebih dahulu

1. Browser target mana yang belum mendukung CSS Functions, dan apakah polyfill diizinkan?
2. Apakah token berupa panjang tetap, persentase, atau nilai yang dapat mencakup calc() dan unit kontainer?
3. Apakah argumen yang tidak valid harus menggunakan nilai default, membatalkan deklarasi, atau menggunakan fallback komponen?
4. Apakah tema mendefinisikan token pada :root, cakupan komponen, atau batas Shadow DOM?

4. Jawaban tiga puluh detik

Saya akan menempatkan padding statis yang berfungsi sebelum deklarasi yang ditingkatkan, kemudian menimpanya di dalam @supports. Fungsi tersebut menggunakan parameter bertipe dan ber-default, serta mengembalikan panjang melalui result. Custom property menyediakan input tema; fungsi tersebut melakukan perhitungan. Browser yang tidak didukung akan mengabaikan fungsi yang tidak dikenal dan mempertahankan fallback sebelumnya.

5. Pembahasan mendalam langkah demi langkah

Langkah 1: Tentukan parameter dan hasilnya

@function --space(--step <integer>: 2, --base <length>: 4px) {
  result: calc(var(--base) * var(--step));
}

Parameter adalah custom property lokal dan dapat mendeklarasikan tipe CSS serta nilai default. result menyediakan nilai akhir; ini bukan return awal seperti pada JavaScript, sehingga fungsi mengikuti aturan pemrosesan deklarasi CSS.

Langkah 2: Hubungkan fungsi ke token

:root {
  --space-base: 4px;
}

.card {
  padding: 16px;
  padding: --space(3, var(--space-base));
}

Deklarasi pertama adalah fallback untuk browser lama; yang kedua berlaku ketika fungsi kustom berhasil di-parse. Token tetap mengalir secara cascade melalui custom property, sehingga tema atau cakupan komponen dapat menimpa --space-base.

Langkah 3: Tangani tipe dan nilai yang tidak valid

Batasan tipe menolak nilai yang tidak cocok dengan tata bahasa (grammar). Nilai default menangani argumen yang dihilangkan, bukan string sembarang yang seharusnya menjadi ukuran panjang. Uji nilai negatif, unit yang salah, dan token yang hilang, serta jangan pernah menggabungkan string yang dikontrol pengguna ke dalam argumen fungsi CSS.

Langkah 4: Pahami cakupan dan dependensi

Parameter fungsi berperilaku sebagai custom property lokal di dalam bodi, sementara lokasi pemanggilan tetap mengikuti aturan cascade, pewarisan, dan urutan lapisan. Token yang digunakan oleh fungsi tidak boleh bergantung kembali pada hasil fungsi; dependensi siklis membuat deklarasi yang dihitung menjadi tidak valid.

Langkah 5: Deteksi fitur dan peningkatan progresif

.card {
  padding: 16px;
}

@supports (padding: --space(3, 4px)) {
  .card {
    padding: --space(3, var(--space-base, 4px));
  }
}

@supports menguji kemampuan parsing, bukan setiap cabang bisnis. Pertahankan fallback yang stabil, periksa tata letak yang dihitung, dan pastikan browser yang tidak didukung tetap mempertahankan teks yang dapat dibaca, indikator fokus, dan ukuran target sentuh.

6. Model jawaban berkualitas tinggi

Saya akan menyediakan padding statis, lalu menghitung nilai yang ditingkatkan dengan @function di dalam @supports. Custom property membawa nilai tema; parameter bertipe dan result melakukan perhitungan. Saya akan menguji argumen yang dihilangkan, unit yang salah, nilai negatif, dan siklus. Karena dukungan browser masih bervariasi, fallback harus dapat berdiri sendiri, dan pemeriksaan browser harus memverifikasi gaya yang dihitung serta dimensi yang aksesibel.

7. Kesalahan umum

• Memperlakukan @function CSS sebagai fungsi build-time Sass → browser produksi mengabaikannya → pertahankan fallback runtime dan lakukan deteksi fitur.
• Meneruskan angka tanpa unit ke parameter <length> → deklarasi menjadi tidak valid → tentukan tipe dan nilai default dengan jelas.
• Mengasumsikan fungsi memutasi custom property → penimpaan tema gagal → pisahkan input token dari output result.
• Hanya menulis @supports tanpa deklarasi dasar → browser yang tidak didukung kehilangan spasi → tulis fallback terlebih dahulu.
• Membuat fungsi saling mereferensikan satu sama lain → dependensi siklis membatalkan nilai → pertahankan dependensi token satu arah.

8. Pertanyaan lanjutan

Lanjutan 1: Apa perbedaannya dengan custom property?

Custom property menyimpan nilai yang mengalir (cascading); fungsi kustom menerima parameter dan menghitung hasil. Fungsi dapat menggunakan kembali logika perhitungan sambil membaca input token yang diwarisi.

Lanjutan 2: Apa perbedaannya dengan fungsi Sass?

Fungsi Sass menghasilkan CSS pada waktu build dan tidak dapat mengamati tema runtime atau status kontainer. Fungsi kustom CSS berjalan selama cascading dan komputasi browser, sehingga bersifat dinamis tetapi membutuhkan penanganan kompatibilitas.

Lanjutan 3: Bagaimana cara mendeteksi dukungan?

Gunakan @supports (padding: --space(1, 4px)) untuk mendeteksi parsing, sambil tetap mempertahankan fallback sebelumnya. Pengujian juga harus memeriksa nilai yang dihitung pada browser yang sebenarnya.

Lanjutan 4: Bagaimana cara menghindari siklus?

Buat token dasar bergantung pada nilai mentah, biarkan fungsi membaca token dan mengeluarkan nilai turunan, serta larang token mereferensikan properti yang menyertakan hasil fungsi. Periksa nilai terhitung yang tidak valid di DevTools.