Tailwind CSS4: Mengapa Utility Styles Lebih Mudah Diskala
Ramai pembangun tidak suka melihat kelas utiliti dalam HTML. Ia kelihatan berselerak. Ia kelihatan seperti gaya dalam talian (inline styles) lama yang anda belajar untuk elakkan. Anda mungkin berfikir bahawa kita sedang bergerak ke belakang.
Tetapi CSS tradisional mewujudkan masalah yang berbeza.
Bayangkan helaian gaya (stylesheet) dengan 5,000 baris. Pembangun A menulis satu kelas dua tahun lalu. Pembangun B ingin mengubah satu perkara kecil. Pembangun B takut untuk menyentuh kelas asal tersebut. Mereka tidak tahu jika ia akan menjejaskan halaman yang tersembunyi. Jadi, mereka mencipta kelas baharu sebagai ganti.
Ini menyebabkan dua isu utama:
- Bundle CSS anda berkembang setiap kali anda menambah ciri baharu.
- Anda menghabiskan masa berjam-jam menamakan perkara seperti
.card-body-flex-inner.
Tailwind CSS mengubah pendekatan ini. Ia menggunakan kelas utiliti seperti bg-mint-500 atau p-4. Kaedah ini memberikan dua kelebihan utama:
Saiz Bundle yang Lebih Kecil Anda menggunakan semula kelas yang sama di seluruh aplikasi anda. Fail CSS anda tidak berkembang secara linear dengan projek anda. Sama ada anda mempunyai sepuluh halaman atau sepuluh ribu, CSS anda tetap kecil.
Refactoring yang Lebih Selamat Semua gaya untuk sesuatu elemen berada di dalam komponen tersebut. Jika anda memadam komponen itu, gaya tersebut akan turut hilang. Anda tidak akan merosakkan bar sisi (sidebar) pada halaman lain secara tidak sengaja.
Anda mungkin bertanya tentang kebolehbacaan (readability).
Dalam pembangunan web moden, anda menggunakan komponen seperti React atau Vue. Anda tidak melihat HTML yang berselerak sepanjang hari. Anda menggayakan komponen itu sekali sahaja. Kemudian, anda menggunakan tag yang bersih seperti <Card /> dalam susun atur (layout) utama anda.
Perincian yang berselerak kekal di dalam fail komponen. Seni bina utama anda kekal bersih dan boleh diramal.
Kami menukar penandaan (markup) yang cantik dengan penyelenggaraan yang lebih baik. Kami menerima kod yang berselerak semasa pembangunan untuk memastikan sistem produksi yang stabil.
Bagaimana anda menguruskan CSS anda? Adakah anda suka kelas utiliti?