Mengurangi Pengulangan Gaya dengan Fungsi CSS

Mengelola stylesheet besar sering kali menyebabkan logika berulang, terutama saat menangani token sistem desain seperti gradien atau pola tata letak responsif.

At-rule @function CSS memungkinkan Anda mengenkapsulasi logika ini ke dalam fungsi berparameter yang dapat digunakan kembali, sehingga CSS Anda lebih mudah dikelola, konsisten, dan DRY (Don't Repeat Yourself).

Sintaksis @function

Fungsi kustom ditentukan menggunakan aturan @function yang diikuti dengan nama yang diberi tanda hubung dan daftar parameter. Fungsi ini menampilkan nilai menggunakan properti result.

@function --my-function(--input1 <length>, --input2: default-value) returns <length> {
  /* Logic goes here */
  result: var(--input1);
}

Konsep Utama

• Parameter: Harus diawali dengan tanda hubung ganda (--).
• Default: Anda dapat memberikan nilai default menggunakan titik dua (:).
• Hasil: Properti result menentukan nilai yang ditampilkan fungsi. result terakhir yang dideklarasikan dalam isi fungsi akan menang.
• Cakupan: Parameter dan variabel yang ditentukan di dalam fungsi memiliki cakupan lokal.
• Jenis: Anda dapat mewajibkan parameter dan nilai yang ditampilkan agar cocok dengan jenis CSS dengan notasi tanda kurung (misalnya, <color>) dan mengizinkan beberapa jenis dengan fungsi type (misalnya, type(<number> | <percentage>)).

Contoh Praktis

1. Token Sistem Desain (Gradien)

Pastikan gradasi warna yang konsisten di seluruh aplikasi Anda dengan mengenkapsulasi logika gradien. --angle memberikan nilai default untuk memberikan konsistensi yang dapat diganti.

@function --fancy-gradient(--start-color <color>, --end-color <color>, --angle: 98deg) returns <image>{
  result: linear-gradient(in oklab var(--angle), var(--start-color), var(--end-color) );
}

.card {
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

2. Logika Tata Letak Bersyarat

Anda dapat menggunakan @media atau kueri lainnya langsung di dalam fungsi untuk menampilkan nilai yang berbeda berdasarkan lingkungan. Saat menggunakan logika kondisional dalam fungsi, perhatikan bahwa @function tidak "menampilkan" nilai pertama result, melainkan mengikuti CSS cascade, dan me-resolve ke nilai terakhir yang cocok berdasarkan ukuran layar, ukuran penampung, atau kueri lainnya.

@function --grid-template(--count <number>){
  /* MANDATORY: Put default value first. */
  result: 1fr; /* Default: stack */
  @media (min-width: 800px) {
    result: repeat(var(--count), 1fr); /* Grid on larger screens */
  }
}

main {
  display: grid;
  grid-template-columns: --grid-template(2);
}

Praktik Terbaik

• Gunakan Nama dengan Tanda Hubung: Selalu awali nama fungsi dan parameter Anda dengan --.
• Berikan Default: Buat fungsi Anda lebih andal dengan memberikan nilai default yang sesuai.
• Buat Tetap Sederhana: Gunakan fungsi untuk logika yang benar-benar berulang atau kompleks. Jangan terlalu rumit dalam membuat pasangan nilai properti yang sederhana.
• Gunakan Jenis: Pastikan parameter dan nilai yang ditampilkan adalah jenis yang diharapkan.
• Pertimbangkan Alternatif yang Telah Dikompilasi: Untuk fungsi yang tidak bergantung pada input pengguna, kueri media, atau variasi sisi klien lainnya, pertimbangkan untuk menggunakan precompiler CSS guna menghindari pekerjaan yang tidak perlu di klien.

Strategi penggantian

Di browser yang tidak mendukung Fungsi CSS, nilai yang ditetapkan menggunakan fungsi CSS tidak akan valid. Untuk mendukung browser lain, berikan nilai pengganti untuk properti terlebih dahulu. Nilai ini akan diganti di browser yang mendukung fungsi CSS.

.card {
  /* Provide fallback, in this case a solid color. */
  background: #5d87e9;
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

main {
  /* Provide fallback, in this case a simple stacked default. */
  grid-template-columns: 1fr;
  grid-template-columns: --grid-template(2);
}

Jika Anda perlu mengurangi pengulangan gaya sekaligus mendukung browser lain, pertimbangkan pra-compiler CSS dengan fungsi, seperti Sass.