Tiga Pass, Makin Sedikit

Jam 23:23. Saya menatap layar setelah tiga kali commit berturut-turut merestyle grid layanan di sebuah situs profil perusahaan. Kursor berhenti di ikon-ikon yang masih terlihat "terkotak-kotak", sementara kartu referensi di atasnya justru tampak tenang dan lapang. Ada yang salah dengan ritme visual ini, dan kali ini ada satu elemen yang jelas-jelas minta ditarik keluar dari sana.

Wrapper yang Cuma Kebiasaan

Awalnya saya kira masalahnya cuma di border. Saya hapus class ring-1 ring-inset ring-accent/15 dan group-hover:ring-accent dari dua tile ikon. Dua baris kode hilang. Perubahan yang sunyi. Tapi saat saya simpan dan muat ulang, rasanya masih aja ganjal. Tile-nya masih ada di sana. Wrapper dengan background tile dan flex centering tetap membatasi napas ikonnya.

Saya sempat mengira ornamentasi kecil ini diperlukan untuk konsistensi visual, apalagi saat malam hari mata gampang tertipu oleh kontras yang kurang pas. Tapi setelah saya bandingkan langsung dengan desain aslinya, itu cuma kebiasaan lama kayak yang sering kebawa dari project sebelumnya. Ikon Lucide itu sendiri sudah komponen yang berdiri sendiri dan nggak butuh pembungkus. Wrapper span-nya saya hapus, komponen Icon dari lucide-react dirender langsung. Saya atur stroke width satu setengah dan memperbesar ukurannya dari size-5 menjadi size-8 untuk layanan, serta size-6 ke size-7 untuk sertifikat [4].

// Sebelum: Wrapper span yang tidak perlu
<span className="bg-tile flex items-center justify-center p-4">
  <ServiceIcon className="text-accent" size={20} />
</span>

// Sesudah: Bare icon dengan prop yang tepat
<ServiceIcon className="text-accent" size={32} strokeWidth={1.5} />

Hasilnya? Ikon yang lebih besar dengan stroke lebih tipis justru terasa jauh lebih ringan ketimbang kotak pembungkus apa pun. Markup yang melakukan pekerjaan yang seharusnya bisa diselesaikan oleh sebuah prop adalah markup yang berlebihan.

34 Baris yang Menghilang

Saya scroll ke bawah, dan kejutan berikutnya muncul. Di bagian bawah seksi layanan, ada strip sertifikasi ISO yang terdiri dari 34 baris kode. Ada

berisi kartu sertifikat, prop certifications, dan import BadgeCheck. Masalahnya jelas banget: sertifikasi yang sama persis udah dirender sebagai kartu di bagian hero, lebih tinggi di halaman yang sama.

Konten ini diduplikasi dua kali dalam satu halaman. Saya hapus seluruh blok itu. 34 baris kode menguap begitu saja. Tidak ada rasa kehilangan, hanya kelegaan melihat struktur DOM yang mendadak bernapas lebih lega.

Pengurangan ini bukan cuma soal estetika atau membersihkan kode. Lebih sedikit wrapper berarti lebih sedikit tempat di mana pengecualian hover atau animasi bisa salah tempat. Kontrak aksesibilitas gerak tetap terjaga. Animasi scaling atau panning bisa memicu ketidaknyamanan vestibular pada pengguna tertentu, jadi kita wajib menghormati pengaturan prefers-reduced-motion [5]. Ini bukan cuma soal mengikuti standar, tapi soal empati pada pengguna yang memang sensitif terhadap gerakan berlebihan di layar.

Dengan menghapus elemen yang tidak perlu, kita juga biar varian motion-reduce dari Tailwind CSS cuma perlu diterapkan pada elemen yang benar-benar bergerak, bukan pada hiasan yang seharusnya diam sejak awal [1]. Ini adalah bentuk kebisingan yang sering kita abaikan saat terlalu fokus pada penyesuaian visual semata.

Proses mencocokkan desain referensi adalah perjalanan yang sering berakhir pada penghapusan. Pass pertama meniru kerangka luarnya. Pass kedua menunjukkan bahwa ornamentasi di dalamnya hanyalah kebiasaan, bukan kebutuhan. Pass ketiga membuktikan bahwa konten yang diduplikasi oleh desain hanyalah gangguan.

Aturan praktis saya ke depan sederhana: setelah pass penyesuaian, lakukan sapuan penghapusan. Tanyakan pada setiap hiasan, siapa yang akan merindukannya jika hilang? Restyling yang sukses adalah pengurangan, sampai diff-nya jadi sunyi. Tiga pass makin sedikit, dan hasilnya jauh lebih baik.

Sumber

[1] Tailwind CSS — Hover, focus, and other states

[4] Lucide — Lucide for React

[5] MDN Web Docs — prefers-reduced-motion