Eksperimen radikal seorang web developer yang sepenuhnya menghapus CSS classes dari website pribadinya telah memicu diskusi tentang kompleksitas yang terus meningkat dalam pengembangan web modern dan apakah pendekatan yang lebih sederhana mungkin lebih baik.
Developer tersebut memulai perjalanan yang tidak biasa ini setelah menyadari bahwa mereka tidak mengikuti saran mereka sendiri tentang penggunaan elemen bawaan HTML secara lebih efektif. Alih-alih mengandalkan CSS classes tradisional, mereka merestrukturisasi seluruh situs menggunakan hanya HTML tag selectors, custom elements, dan custom attributes.
Custom Elements Menggantikan Classes Tradisional
Pendekatan ini berpusat pada penggunaan custom HTML tags seperti note-pad dan random-pattern alih-alih menerapkan classes pada elemen div generik. Custom tags ini bekerja tanpa JavaScript, memanfaatkan sifat progressive enhancement HTML. Untuk variasi styling, developer menggunakan custom attributes dengan pasangan key-value yang sebenarnya daripada konvensi penamaan yang biasanya terlihat dalam metodologi seperti BEM.
*Custom elements: HTML tags yang bukan bagian dari spesifikasi standar tetapi tetap merupakan HTML yang valid. Mereka memungkinkan developer untuk membuat elemen semantik mereka sendiri.*BEM: Metodologi penamaan CSS yang merupakan singkatan dari Block, Element, Modifier.
Perbandingan Pendekatan Teknis
| Metode Tradisional | Metode Tanpa Class |
|---|---|
<div class="header-primary"> |
<header> dengan styling kontekstual |
| Konvensi penamaan BEM | Atribut kustom dengan pasangan key-value |
| Isolasi komponen | Hubungan elemen kontekstual |
| Utility classes | Tag HTML kustom |
Reaksi Komunitas Menunjukkan Hasil yang Beragam
Eksperimen ini menghasilkan beberapa hasil yang mengesankan. Website akhir hanya menggunakan sekitar 5KB CSS untuk seluruh situs, dan aksesibilitas meningkat secara signifikan karena fokus yang lebih besar pada semantic markup. Namun, umpan balik komunitas menunjukkan bahwa pendekatan ini memiliki keterbatasan yang jelas.
Seorang developer yang mencoba metode serupa mencatat bahwa meskipun bekerja dengan baik untuk website bergaya dokumen dan mengajarkan pelajaran berharga tentang fitur CSS modern, pendekatan ini menjadi terlalu membatasi dan rapuh untuk aplikasi yang lebih kompleks. Mereka akhirnya kembali ke pendekatan berbasis komponen dan utility frameworks.
Ini adalah solusi yang solid untuk blog dan aplikasi dengan nuansa dokumen yang berbeda, tetapi untuk apa pun di luar itu saya merasa terlalu membatasi dan rapuh.
Hasil yang Dicapai
- Ukuran CSS akhir: ~5KB untuk seluruh website
- Peningkatan aksesibilitas melalui fokus pada markup semantik
- Struktur HTML yang lebih bersih
- Eliminasi class 99% (plugin syntax highlighting masih menggunakan class)
- Peningkatan penggunaan fitur CSS modern (nesting,
:has(),where())
Paradoks Kompleksitas dalam Pengembangan Web
Diskusi ini telah menyoroti pola menarik dalam pengembangan web - siklus konstan antara merangkul kompleksitas dan menemukan kembali pendekatan yang lebih sederhana. Beberapa anggota komunitas menunjukkan bahwa HTML pada awalnya dirancang sebagai bahasa generik untuk dokumen tipikal, dan sebagian besar website sebenarnya tidak memerlukan lebih dari elemen default.
Namun, yang lain berargumen bahwa developer bukanlah yang mendorong kompleksitas. Pengguna dan desainer modern mengharapkan antarmuka interaktif dengan animasi yang halus dan pengalaman visual yang dipoles, mendorong developer menuju solusi yang lebih canggih bahkan ketika mereka mungkin lebih menyukai pendekatan yang lebih sederhana.
Tantangan Praktis Muncul
Meskipun menarik secara filosofis, beberapa masalah praktis muncul. Developer tidak dapat mencapai website yang sepenuhnya bebas class karena dependensi seperti plugin syntax highlighting. Selain itu, beberapa anggota komunitas melaporkan masalah kompatibilitas mobile, dengan konten yang tidak ditampilkan dengan benar pada layar yang lebih kecil.
Pendekatan ini juga menuntut perencanaan yang lebih hati-hati dibandingkan dengan sistem komponen yang terisolasi. Developer perlu memikirkan hubungan antara elemen daripada memperlakukan setiap komponen secara independen, yang bisa menantang untuk tim yang lebih besar dengan tingkat keterampilan yang bervariasi.
Eksperimen ini mewakili eksplorasi yang menarik tentang fundamental pengembangan web, bahkan jika mungkin tidak praktis untuk setiap proyek. Ini berfungsi sebagai pengingat bahwa terkadang mundur untuk memeriksa asumsi kita tentang praktik terbaik dapat menghasilkan wawasan berharga tentang alat dan metode yang kita gunakan sehari-hari.
Referensi: This website has no class