Aturan @apply CSS: Kebangkitan dan Kejatuhan Mixin Bawaan serta Alternatif Modern

Dalam lanskap pengembangan web yang terus berkembang, pencarian untuk kode yang lebih bersih, lebih mudah dipelihara, dan dapat digunakan kembali adalah sebuah konstanta. Selama bertahun-tahun, pengembang telah bersandar pada preprosesor CSS seperti Sass dan Less untuk membawa kekuatan terprogram ke dalam stylesheet. Salah satu fitur yang paling disukai dari alat-alat ini adalah mixin—cara untuk mendefinisikan blok deklarasi CSS yang dapat digunakan kembali. Hal ini menimbulkan pertanyaan alami: bisakah kita memiliki fitur canggih ini secara bawaan di CSS? Untuk sementara waktu, jawabannya tampak ya, dan namanya adalah @apply.

Aturan @apply adalah proposal yang menjanjikan yang bertujuan untuk membawa fungsionalitas seperti mixin langsung ke dalam peramban, memanfaatkan kekuatan Properti Kustom CSS. Ini menjanjikan masa depan di mana kita bisa mendefinisikan cuplikan gaya yang dapat digunakan kembali dalam CSS murni dan menerapkannya di mana saja, bahkan memperbaruinya secara dinamis dengan JavaScript. Namun, jika Anda adalah seorang pengembang hari ini, Anda tidak akan menemukan @apply di peramban stabil mana pun. Proposal tersebut pada akhirnya ditarik dari spesifikasi resmi CSS.

Artikel ini adalah eksplorasi komprehensif dari aturan @apply CSS. Kita akan menelusuri apa itu, potensi besar yang dimilikinya untuk komposisi gaya, alasan kompleks di balik penghentiannya, dan yang paling penting, alternatif modern yang siap produksi yang memecahkan masalah yang sama dalam ekosistem pengembangan saat ini.

Apa Itu Aturan @apply CSS?

Pada intinya, aturan @apply dirancang untuk mengambil satu set deklarasi CSS yang disimpan dalam properti kustom dan "menerapkannya" di dalam sebuah aturan CSS. Ini memungkinkan pengembang untuk membuat apa yang pada dasarnya adalah "kumpulan properti" atau "kumpulan aturan" yang dapat digunakan kembali di beberapa selektor, mewujudkan prinsip Don't Repeat Yourself (DRY).

Konsep ini dibangun di atas Properti Kustom CSS (sering disebut Variabel CSS). Meskipun kita biasanya menggunakan properti kustom untuk menyimpan nilai tunggal seperti warna (--brand-color: #3498db;) atau ukuran (--font-size-md: 16px;), proposal untuk @apply memperluas kemampuannya untuk menampung seluruh blok deklarasi.

Sintaks yang Diusulkan

Sintaksnya lugas dan intuitif bagi siapa pun yang akrab dengan CSS. Pertama, Anda akan mendefinisikan properti kustom yang berisi blok deklarasi CSS, yang diapit oleh kurung kurawal {}.

            
:root {
  --primary-button-styles: {
    background-color: #007bff;
    color: #ffffff;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  };
}

            

              
                Copy
              
            
          

Kemudian, di dalam aturan CSS apa pun, Anda bisa menggunakan at-rule @apply untuk menyuntikkan seluruh blok gaya tersebut:

            
.btn-primary {
  @apply --primary-button-styles;
}

.form-submit-button {
  @apply --primary-button-styles;
  margin-top: 1rem; /* Anda masih bisa menambahkan gaya lain */
}

            

              
                Copy
              
            
          

Dalam contoh ini, baik .btn-primary maupun .form-submit-button akan mewarisi set lengkap gaya yang didefinisikan dalam --primary-button-styles. Ini merupakan perbedaan signifikan dari fungsi var() standar, yang hanya dapat menggantikan satu nilai ke dalam satu properti.

Manfaat Utama yang Diharapkan

• Ketergunaan Ulang Kode: Manfaat yang paling jelas adalah menghilangkan pengulangan. Pola umum seperti gaya tombol, tata letak kartu, atau kotak peringatan dapat didefinisikan sekali dan diterapkan di mana-mana.
• Pemeliharaan yang Ditingkatkan: Untuk memperbarui tampilan semua tombol utama, Anda hanya perlu mengedit properti kustom --primary-button-styles. Perubahan tersebut kemudian akan menyebar ke setiap elemen di mana ia diterapkan.
• Tema Dinamis: Karena didasarkan pada properti kustom, mixin ini dapat diubah secara dinamis dengan JavaScript, memungkinkan kemampuan tema runtime yang kuat yang tidak dapat ditawarkan oleh preprosesor (yang beroperasi pada waktu kompilasi).
• Menjembatani Kesenjangan: Ini menjanjikan untuk membawa fitur yang sangat disukai dari dunia preprosesor ke dalam CSS bawaan, mengurangi ketergantungan pada alat build untuk fungsionalitas spesifik ini.

Janji @apply: Mixin Bawaan dan Komposisi Gaya

Potensi @apply jauh melampaui penggunaan ulang gaya sederhana. Ini membuka dua konsep kuat untuk arsitektur CSS: mixin bawaan dan komposisi gaya deklaratif.

Jawaban Bawaan untuk Mixin Preprosesor

Selama bertahun-tahun, Sass telah menjadi standar emas untuk mixin. Mari kita bandingkan bagaimana Sass mencapai ini dengan bagaimana @apply dimaksudkan untuk bekerja.

Mixin Sass yang Khas:

            
@mixin flexible-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-banner {
  @include flexible-center;
  height: 100vh;
}

.modal-content {
  @include flexible-center;
  flex-direction: column;
}

            

              
                Copy
              
            
          

Padanannya dengan @apply:

            
:root {
  --flexible-center: {
    display: flex;
    justify-content: center;
    align-items: center;
  };
}

.hero-banner {
  @apply --flexible-center;
  height: 100vh;
}

.modal-content {
  @apply --flexible-center;
  flex-direction: column;
}

            

              
                Copy
              
            
          

Sintaks dan pengalaman pengembang sangat mirip. Perbedaan utamanya, bagaimanapun, adalah dalam eksekusinya. @mixin Sass diproses selama langkah build, menghasilkan CSS statis. Aturan @apply akan diproses oleh peramban saat runtime. Perbedaan ini adalah kekuatan terbesarnya dan, seperti yang akan kita lihat, kejatuhan utamanya.

Komposisi Gaya Deklaratif

@apply akan memungkinkan pengembang untuk membangun komponen kompleks dengan menyusun cuplikan gaya yang lebih kecil dan bertujuan tunggal. Bayangkan membangun perpustakaan komponen UI di mana Anda memiliki blok dasar untuk tipografi, tata letak, dan penampilan.

            
:root {
  --typography-body: {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
  };

  --card-layout: {
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  };

  --theme-light: {
    background-color: #ffffff;
    border: 1px solid #ddd;
  };

  --theme-dark: {
    background-color: #2c3e50;
    border: 1px solid #444;
    color: #ecf0f1;
  };
}

.article-card {
  @apply --typography-body;
  @apply --card-layout;
  @apply --theme-light;
}

.user-profile-card.dark-mode {
  @apply --typography-body;
  @apply --card-layout;
  @apply --theme-dark;
}

            

              
                Copy
              
            
          

Pendekatan ini sangat deklaratif. CSS untuk .article-card dengan jelas menyatakan komposisinya: ia memiliki tipografi badan, tata letak kartu, dan tema terang. Ini membuat kode lebih mudah dibaca dan dipahami.

Kekuatan Super Dinamis

Fitur yang paling menarik adalah dinamismenya saat runtime. Karena --card-theme bisa menjadi properti kustom biasa, Anda dapat menukar seluruh set aturan dengan JavaScript.

            
/* CSS */
.user-profile-card {
  @apply --typography-body;
  @apply --card-layout;
  @apply var(--card-theme, --theme-light); /* Terapkan tema, defaultnya terang */
}

/* JavaScript */
const themeToggleButton = document.getElementById('theme-toggle');
themeToggleButton.addEventListener('click', () => {
  const root = document.documentElement;
  const isDarkMode = root.style.getPropertyValue('--card-theme') === '--theme-dark';

  if (isDarkMode) {
    root.style.setProperty('--card-theme', '--theme-light');
  } else {
    root.style.setProperty('--card-theme', '--theme-dark');
  }
});

            

              
                Copy
              
            
          

Contoh hipotetis ini menunjukkan bagaimana Anda bisa mengganti tema komponen antara terang dan gelap dengan mengubah satu properti kustom. Peramban kemudian perlu mengevaluasi kembali aturan @apply dan menukar sebagian besar gaya secara langsung. Ini adalah ide yang sangat kuat, tetapi juga mengisyaratkan kompleksitas besar yang tersembunyi di bawah permukaan.

Debat Besar: Mengapa @apply Dihapus dari Spesifikasi CSS?

Dengan visi yang begitu menarik, mengapa @apply menghilang? Keputusan untuk menghapusnya tidak dibuat dengan mudah. Itu adalah hasil dari diskusi yang panjang dan kompleks di dalam Grup Kerja CSS (CSSWG) dan di antara vendor peramban. Alasannya bermuara pada masalah signifikan dengan performa, kompleksitas, dan prinsip-prinsip dasar CSS.

1. Implikasi Performa yang Tidak Dapat Diterima

Ini adalah alasan utama kejatuhannya. CSS dirancang untuk menjadi sangat cepat dan efisien. Mesin render peramban dapat mem-parsing stylesheet, membangun CSSOM (CSS Object Model), dan menerapkan gaya ke DOM dalam urutan yang sangat dioptimalkan. Aturan @apply mengancam akan menghancurkan optimisasi ini.

• Parsing dan Validasi: Ketika peramban menemukan properti kustom seperti --main-color: blue;, ia tidak perlu memvalidasi nilai `blue` sampai benar-benar digunakan dalam properti seperti `color: var(--main-color);`. Namun, dengan @apply, peramban harus mem-parsing dan memvalidasi seluruh blok deklarasi CSS arbitrer di dalam properti kustom. Ini adalah tugas yang jauh lebih berat.
• Kompleksitas Cascade: Tantangan terbesar adalah mencari tahu bagaimana @apply akan berinteraksi dengan cascade. Ketika Anda @apply sebuah blok gaya, di mana gaya-gaya itu masuk dalam cascade? Apakah mereka memiliki spesifisitas yang sama dengan aturan tempat mereka berada? Apa yang terjadi jika properti yang di-@apply-kan kemudian ditimpa oleh gaya lain? Ini menciptakan masalah cascade "late-breaking" yang mahal secara komputasi dan sulit untuk didefinisikan secara konsisten.
• Perulangan Tak Terbatas dan Dependensi Sirkular: Ini memperkenalkan kemungkinan referensi sirkular. Bagaimana jika --mixin-a menerapkan --mixin-b, yang pada gilirannya menerapkan --mixin-a? Mendeteksi dan menangani kasus-kasus ini saat runtime akan menambah overhead yang signifikan pada mesin CSS.

Intinya, @apply mengharuskan peramban untuk melakukan sejumlah besar pekerjaan yang biasanya ditangani oleh alat build pada waktu kompilasi. Melakukan pekerjaan ini secara efisien saat runtime untuk setiap kalkulasi ulang gaya dianggap terlalu mahal dari perspektif performa.

2. Melanggar Jaminan Cascade

Cascade CSS adalah sistem yang dapat diprediksi, meskipun terkadang kompleks. Pengembang mengandalkan aturan spesifisitas, pewarisan, dan urutan sumber untuk memahami gaya mereka. Aturan @apply memperkenalkan tingkat ketidaklangsungan yang membuat pemahaman ini jauh lebih sulit.

Pertimbangkan skenario ini:

            
:root {
  --my-mixin: {
    color: blue;
  };
}

div {
  @apply --my-mixin; /* warna menjadi biru */
  color: red;        /* warna sekarang menjadi merah */
}

            

              
                Copy
              
            
          

Ini tampak cukup sederhana. Tapi bagaimana jika urutannya dibalik?

            
div {
  color: red;
  @apply --my-mixin; /* Apakah ini menimpa warna merah? */
}

            

              
                Copy
              
            
          

CSSWG harus memutuskan: apakah @apply berperilaku seperti properti shorthand yang diperluas di tempat, atau apakah ia berperilaku seperti satu set deklarasi yang disuntikkan dengan urutan sumber mereka sendiri? Ambiguitas ini merusak prediktabilitas inti dari CSS. Ini sering digambarkan sebagai "sihir"—istilah yang digunakan pengembang untuk perilaku yang tidak mudah dipahami atau di-debug. Memperkenalkan sihir semacam ini ke dalam inti CSS adalah kekhawatiran filosofis yang signifikan.

3. Tantangan Sintaks dan Parsing

Sintaksnya sendiri, meskipun tampak sederhana, menimbulkan masalah. Mengizinkan CSS arbitrer di dalam nilai properti kustom berarti parser CSS harus jauh lebih kompleks. Ia harus menangani blok bersarang, komentar, dan potensi kesalahan di dalam definisi properti itu sendiri, yang merupakan penyimpangan signifikan dari cara properti kustom dirancang untuk bekerja (menampung apa yang pada dasarnya adalah string hingga substitusi).

Pada akhirnya, konsensusnya adalah bahwa biaya performa dan kompleksitas jauh lebih besar daripada manfaat kenyamanan pengembang, terutama ketika solusi lain sudah ada atau sedang dikembangkan.

Warisan @apply: Alternatif Modern dan Praktik Terbaik

Mimpi cuplikan gaya yang dapat digunakan kembali di CSS masih jauh dari mati. Masalah yang ingin dipecahkan oleh @apply masih sangat nyata, dan komunitas pengembang sejak saat itu telah merangkul beberapa alternatif yang kuat dan siap produksi. Inilah yang harus Anda gunakan hari ini.

Alternatif 1: Kuasai Properti Kustom CSS (Cara yang Dimaksudkan)

Solusi bawaan yang paling langsung adalah menggunakan Properti Kustom CSS untuk tujuan aslinya: menyimpan nilai tunggal yang dapat digunakan kembali. Alih-alih membuat mixin untuk sebuah tombol, Anda membuat satu set properti kustom yang mendefinisikan tema tombol tersebut. Pendekatan ini kuat, berkinerja, dan didukung penuh oleh semua peramban modern.

Contoh: Membangun komponen dengan Properti Kustom

            
:root {
  --btn-padding-y: 0.5rem;
  --btn-padding-x: 1rem;
  --btn-font-size: 1rem;
  --btn-border-radius: 0.25rem;
  --btn-transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.btn {
  /* Gaya struktural */
  display: inline-block;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  border-radius: var(--btn-border-radius);
  transition: var(--btn-transition);
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
}

.btn-primary {
  /* Tema melalui properti kustom */
  --btn-bg: #007bff;
  --btn-color: #ffffff;
  --btn-hover-bg: #0056b3;

  background-color: var(--btn-bg);
  color: var(--btn-color);
}

.btn-primary:hover {
  background-color: var(--btn-hover-bg);
}

.btn-secondary {
  --btn-bg: #6c757d;
  --btn-color: #ffffff;
  --btn-hover-bg: #5a6268;

  background-color: var(--btn-bg);
  color: var(--btn-color);
}

.btn-secondary:hover {
  background-color: var(--btn-hover-bg);
}

            

              
                Copy
              
            
          

Pendekatan ini memberi Anda komponen yang dapat diberi tema dan dipelihara menggunakan CSS bawaan. Strukturnya didefinisikan di .btn, dan tema (bagian yang mungkin Anda masukkan ke dalam aturan @apply) dikontrol oleh properti kustom yang terlingkup ke pengubah seperti .btn-primary.

Alternatif 2: CSS Utility-First (misalnya, Tailwind CSS)

Kerangka kerja utility-first seperti Tailwind CSS telah membawa konsep komposisi gaya ke kesimpulan logisnya. Alih-alih membuat kelas komponen di CSS, Anda menyusun gaya langsung di HTML Anda menggunakan kelas utilitas kecil yang bertujuan tunggal.

Menariknya, Tailwind CSS memiliki direktif @apply sendiri. Sangat penting untuk dipahami bahwa ini BUKAN @apply CSS bawaan. @apply Tailwind adalah fitur waktu build yang bekerja di dalam ekosistemnya. Ia membaca kelas utilitas Anda dan mengompilasinya menjadi CSS statis, menghindari semua masalah performa runtime dari proposal bawaan.

Contoh: Menggunakan @apply Tailwind

            
/* Di file CSS Anda yang diproses oleh Tailwind */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

/* Di HTML Anda */
<button class="btn-primary">
  Primary Button
</button>

            

              
                Copy
              
            
          

Di sini, @apply Tailwind mengambil daftar kelas utilitas dan membuat kelas komponen baru, .btn-primary. Ini memberikan pengalaman pengembang yang sama dalam membuat set gaya yang dapat digunakan kembali tetapi melakukannya dengan aman pada waktu kompilasi.

Alternatif 3: Library CSS-in-JS

Bagi pengembang yang bekerja di dalam kerangka kerja JavaScript seperti React, Vue, atau Svelte, library CSS-in-JS (misalnya, Styled Components, Emotion) menawarkan cara kuat lain untuk mencapai komposisi gaya. Mereka menggunakan model komposisi JavaScript sendiri untuk membangun gaya.

Contoh: Mixin di Styled Components (React)

            
import styled, { css } from 'styled-components';

// Definisikan mixin menggunakan template literal
const buttonBaseStyles = css`
  background-color: #007bff;
  color: #ffffff;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
`;

// Buat komponen dan terapkan mixin
const PrimaryButton = styled.button`
  ${buttonBaseStyles}

  &:hover {
    background-color: #0056b3;
  }
`;

// Komponen lain yang menggunakan kembali gaya dasar yang sama
const SubmitButton = styled.input.attrs({ type: 'submit' })`
  ${buttonBaseStyles}
  margin-top: 1rem;
`;

            

              
                Copy
              
            
          

Ini memanfaatkan kekuatan penuh JavaScript untuk membuat gaya yang dapat digunakan kembali, dinamis, dan terlingkup, memecahkan masalah DRY di dalam paradigma berbasis komponen.

Alternatif 4: Preprosesor CSS (Sass, Less)

Jangan lupakan alat-alat yang memulai semuanya. Sass dan Less masih sangat kuat dan banyak digunakan. Fungsionalitas mixin mereka sudah matang, kaya fitur (mereka dapat menerima argumen), dan sepenuhnya andal karena, seperti @apply Tailwind, mereka beroperasi pada waktu kompilasi.

Untuk banyak proyek, terutama yang tidak dibangun di atas kerangka kerja JavaScript yang berat, preprosesor masih merupakan cara paling sederhana dan paling efektif untuk mengelola gaya yang kompleks dan dapat digunakan kembali.

Kesimpulan: Pelajaran yang Dipetik dari Eksperimen @apply

Kisah aturan @apply CSS adalah studi kasus yang menarik dalam evolusi standar web. Ini merupakan upaya berani untuk membawa fitur pengembang yang disukai ke platform bawaan. Penarikan akhirnya bukanlah kegagalan ide, tetapi bukti komitmen Grup Kerja CSS terhadap performa, prediktabilitas, dan kesehatan jangka panjang dari bahasa tersebut.

Poin-poin penting bagi pengembang saat ini adalah:

• Gunakan Properti Kustom CSS untuk nilai, bukan kumpulan aturan. Gunakan mereka untuk membuat sistem tema yang kuat dan menjaga konsistensi desain.
• Pilih alat yang tepat untuk komposisi. Masalah yang coba dipecahkan oleh @apply—komposisi gaya—paling baik ditangani oleh alat khusus yang beroperasi pada waktu build (seperti Tailwind CSS atau Sass) atau dalam konteks komponen (seperti CSS-in-JS).
• Pahami "mengapa" di balik standar web. Mengetahui mengapa fitur seperti @apply ditolak memberi kita apresiasi yang lebih dalam terhadap kompleksitas rekayasa peramban dan prinsip-prinsip dasar CSS, seperti cascade.

Meskipun kita mungkin tidak akan pernah melihat aturan @apply bawaan di CSS, semangatnya tetap hidup. Keinginan untuk pendekatan penataan gaya yang lebih modular, berbasis komponen, dan DRY telah membentuk alat modern dan praktik terbaik yang kita gunakan setiap hari. Platform web terus berkembang, dengan fitur-fitur seperti CSS Nesting, @scope, dan Cascade Layers yang menyediakan cara-cara baru dan bawaan untuk menulis CSS yang lebih terorganisir dan mudah dipelihara. Perjalanan untuk pengalaman penataan gaya yang lebih baik terus berlanjut, dan pelajaran yang didapat dari eksperimen seperti @apply adalah yang membuka jalan ke depan.