Eksperimen radikal seorang pembangun web untuk menghapuskan sepenuhnya kelas CSS dari laman web peribadi mereka telah mencetuskan perbincangan mengenai kerumitan yang semakin meningkat dalam pembangunan web moden dan sama ada pendekatan yang lebih mudah mungkin lebih baik.
Pembangun tersebut memulakan perjalanan luar biasa ini selepas menyedari bahawa mereka tidak mengikuti nasihat mereka sendiri tentang menggunakan elemen terbina dalam HTML dengan lebih berkesan. Daripada bergantung kepada kelas CSS tradisional, mereka menyusun semula keseluruhan laman web mereka menggunakan hanya pemilih tag HTML , elemen tersuai, dan atribut tersuai.
Elemen Tersuai Menggantikan Kelas Tradisional
Pendekatan ini berpusat pada penggunaan tag HTML tersuai seperti note-pad dan random-pattern daripada menggunakan kelas pada elemen div generik. Tag tersuai ini berfungsi tanpa JavaScript , memanfaatkan sifat peningkatan progresif HTML . Untuk variasi penggayaan, pembangun menggunakan atribut tersuai dengan pasangan nilai kunci sebenar berbanding konvensyen penamaan yang biasanya dilihat dalam metodologi seperti BEM .
Elemen tersuai: Tag HTML yang bukan sebahagian daripada spesifikasi standard tetapi masih merupakan HTML yang sah. Ia membolehkan pembangun mencipta elemen semantik mereka sendiri. BEM : Metodologi penamaan CSS yang bermaksud Block, Element, Modifier.
Perbandingan Pendekatan Teknikal
| Kaedah Tradisional | Kaedah Tanpa Kelas |
|---|---|
<div class="header-primary"> |
<header> dengan penggayaan kontekstual |
| Konvensyen penamaan BEM | Atribut tersuai dengan pasangan kunci-nilai |
| Pengasingan komponen | Hubungan elemen kontekstual |
| Kelas utiliti | Tag HTML tersuai |
Reaksi Komuniti Menunjukkan Hasil Bercampur
Eksperimen ini menghasilkan beberapa keputusan yang mengagumkan. Laman web akhir hanya menghantar kira-kira 5KB CSS untuk keseluruhan laman web, dan kebolehcapaian bertambah baik dengan ketara disebabkan peningkatan tumpuan pada markup semantik. Walau bagaimanapun, maklum balas komuniti menunjukkan pendekatan ini mempunyai batasan yang jelas.
Seorang pembangun yang mencuba kaedah serupa menyatakan bahawa walaupun ia berfungsi dengan baik untuk laman web gaya dokumen dan mengajar pelajaran berharga tentang ciri CSS moden, ia menjadi terlalu terhad dan rapuh untuk aplikasi yang lebih kompleks. Mereka akhirnya kembali kepada pendekatan berasaskan komponen dan rangka kerja utiliti.
Ia adalah penyelesaian yang kukuh untuk blog dan aplikasi yang mempunyai rasa dokumen yang berbeza, tetapi untuk apa-apa yang melebihi itu, saya mendapati ia terlalu terhad dan rapuh.
Keputusan Yang Dicapai
- Saiz CSS akhir: ~5KB untuk keseluruhan laman web
- Kebolehcapaian yang lebih baik melalui fokus markup semantik
- Struktur HTML yang lebih bersih
- 99% penghapusan kelas (pemalam syntax highlighting masih menggunakan kelas)
- Penggunaan ciri CSS moden yang dipertingkatkan (nesting,
:has(),where())
Paradoks Kerumitan dalam Pembangunan Web
Perbincangan ini telah menyerlahkan corak menarik dalam pembangunan web - kitaran berterusan antara menerima kerumitan dan menemui semula pendekatan yang lebih mudah. Sesetengah ahli komuniti menyatakan bahawa HTML pada asalnya direka sebagai bahasa generik untuk dokumen biasa, dan kebanyakan laman web sebenarnya tidak memerlukan lebih daripada elemen lalai.
Walau bagaimanapun, yang lain berhujah bahawa pembangun bukanlah yang mendorong kerumitan. Pengguna dan pereka moden mengharapkan antara muka interaktif dengan animasi yang lancar dan pengalaman visual yang digilap, mendorong pembangun ke arah penyelesaian yang lebih canggih walaupun mereka mungkin lebih suka pendekatan yang lebih mudah.
Cabaran Praktikal Muncul
Walaupun daya tarikan falsafah, beberapa isu praktikal timbul. Pembangun tidak dapat mencapai laman web yang benar-benar bebas kelas disebabkan kebergantungan seperti plugin penyerlahan sintaks. Selain itu, sesetengah ahli komuniti melaporkan masalah keserasian mudah alih, dengan kandungan tidak dipaparkan dengan betul pada skrin yang lebih kecil.
Pendekatan ini juga memerlukan perancangan yang lebih teliti berbanding sistem komponen terpencil. Pembangun perlu memikirkan hubungan antara elemen berbanding menganggap setiap komponen secara bebas, yang boleh mencabar untuk pasukan yang lebih besar dengan tahap kemahiran yang berbeza-beza.
Eksperimen ini mewakili penerokaan yang menarik tentang asas pembangunan web, walaupun ia mungkin tidak praktikal untuk setiap projek. Ia berfungsi sebagai peringatan bahawa kadang-kadang berundur untuk mengkaji andaian kita tentang amalan terbaik boleh membawa kepada pandangan berharga tentang alat dan kaedah yang kita gunakan setiap hari.
Rujukan: This website has no class