Kartu yang Berhenti Berdekorasi
Nyamain gaya kartu layanan ternyata bukan soal nambah class, tapi hapus dekorasi dan pinjam satu kelas pembatas yang udah ada.
Ringkasan
Awalnya gue pengen nyamain gaya kartu layanan dengan cara nambahin kelas utilitas kayak border sama shadow. Tapi ternyata kartu yang rapi cuma pake satu kelas bersama, reference-divider, jadi solusinya justru hapus semua dekorasinya. Pelajarannya: konsistensi paling gampang dicapai lewat penghapusan kode, bukan nambah-nambah kelas.
Jam sepuluh malam, layar monitor masih nyala terang. Saya udah selesai menyamakan gaya kartu Office dengan kartu Corporate Network di bagian atas halaman. Tapi pas scroll ke bawah, kartu layanan di services-grid.tsx masih terlihat berisik banget. Ada border penuh, bayangan, dan angka watermark besar di pojok kanan atas. Insting pertama saya? Menyalin lagi kelas-kelas utilitas satu per satu kayak yang baru saja saya lakukan.
Saya awalnya berpikir kalau mau menyamakan tampilan, caranya adalah dengan menambahkan properti yang sama. Tambah border-l, tambah ring, atur ulang ukuran tile ikon. Saya bahkan udah mulai mengetik kelas-kelas itu. Tapi pas saya intip kode kartu Corporate Network yang udah terlihat tenang dan rapi, saya sadar ada yang janggal. Kartu itu nggak punya tumpukan kelas utilitas border atau shadow. Dia cuma punya satu kelas ajaib: reference-divider.
Ternyata, kunci menyamakan tampilan bukan dengan menambah, tapi dengan menghapus. Hampir seluruh diff commit ini adalah penghapusan. Saya membuang border penuh, shadow-sm, efek hover angkat, dan tiga elemen dekoratif absolut yang selama ini menghiasi kartu: garis rambut aksen di atas, lingkaran blur samar di pojok, dan angka indeks watermark besar. Prop index yang cuma dipakai untuk menampilkan angka itu juga ikut saya hapus.
// Sebelum: penuh dekorasi dan prop index
<div className="rounded-2xl border border-border bg-card shadow-sm hover:-translate-y-1.5 hover:shadow-xl">// Sesudah: bersih, merujuk kelas bersama
<div className="reference-divider theme-transition bg-transparent min-h-full hover:-translate-y-1 hover:bg-card/60">Kenapa pendekatan ini jauh lebih masuk akal? Karena satu kelas berarti satu sumber kebenaran. Daripada menduplikasi logika dekorasi di setiap komponen, cukup merujuk kelas yang didefinisikan sekali di stylesheet global. Tile ikon juga saya kecilkan ukurannya supaya tampilannya lebih adem dan nggak berebut perhatian dengan konten teks. Yang tetap saya pertahankan adalah focus-visible outline dan motion-reduce:transform-none. Ini penting sebagai kontrak aksesibilitas, biar pengguna yang mengaktifkan mode pengurangan gerakan di perangkat mereka nggak dipaksa melihat animasi yang nggak perlu [1].
Ada juga batasnya. Kadang kita memang butuh pembatas di antara elemen. Kalau tujuannya membuat garis pemisah di antara elemen-elemen saudara, alat yang tepat sebenarnya adalah divide-x atau divide-y, bukan menempelkan border kiri secara manual [2]. Selain itu, menggunakan nama kelas yang merepresentasikan pembatas secara konseptual lebih aman daripada memaksa border kiri atau kanan fisik, karena properti logis seperti start dan end akan lebih mudah beradaptasi jika situs kita suatu saat mendukung mode penulisan kanan-ke-kiri [3].
Saya jadi punya aturan baru untuk diri sendiri. Kalau besok ada kartu lain yang perlu disesuaikan gayanya dengan komponen yang sudah ada, saya nggak akan langsung membuka dokumentasi utilitas untuk mencari apa yang harus ditambahkan. Saya akan mengukur diff-nya dari seberapa banyak kode yang bisa saya hapus. Kadang, konsistensi terbaik lahir saat kita membuat kartu yang berhenti berdekorasi.
Sumber
[1] Tailwind CSS — Hover, focus, and other states
[2] Tailwind CSS — border-width
[3] MDN Web Docs — Basic concepts of logical properties and values