Tailwind CSS4: Mengapa Utility Styles Lebih Mudah Diskalakan
Banyak pengembang benci melihat utility class di dalam HTML. Terlihat berantakan. Terlihat seperti gaya inline lama yang Anda pelajari untuk dihindari. Anda mungkin berpikir kita sedang bergerak mundur.
Namun, CSS tradisional menciptakan masalah yang berbeda.
Bayangkan sebuah stylesheet dengan 5.000 baris. Pengembang A menulis sebuah class dua tahun lalu. Pengembang B ingin mengubah satu hal kecil. Pengembang B takut untuk menyentuh class aslinya. Mereka tidak tahu apakah hal itu akan memengaruhi halaman tersembunyi lainnya. Jadi, mereka malah membuat class baru.
Ini menyebabkan dua masalah utama:
- Bundle CSS Anda membengkak setiap kali Anda menambah fitur baru.
- Anda menghabiskan waktu berjam-jam hanya untuk memberi nama seperti
.card-body-flex-inner.
Tailwind CSS mengubah pendekatan ini. Ia menggunakan utility class seperti bg-mint-500 atau p-4. Metode ini memberikan dua keuntungan utama:
Ukuran Bundle Lebih Kecil Anda menggunakan kembali class yang sama di seluruh aplikasi Anda. File CSS Anda tidak bertambah besar secara linear seiring perkembangan proyek. Baik Anda memiliki sepuluh halaman atau sepuluh ribu halaman, CSS Anda tetap kecil.
Refactoring yang Lebih Aman Semua gaya untuk sebuah elemen berada di dalam komponen tersebut. Jika Anda menghapus komponennya, gaya tersebut akan ikut terhapus. Anda tidak akan merusak sidebar di halaman lain secara tidak sengaja.
Anda mungkin bertanya tentang keterbacaan.
Dalam pengembangan web modern, Anda menggunakan komponen seperti React atau Vue. Anda tidak melihat HTML yang berantakan sepanjang hari. Anda mengatur gaya komponen tersebut sekali saja. Kemudian, Anda menggunakan tag yang bersih seperti <Card /> di tata letak utama Anda.
Detail yang berantakan tetap berada di dalam file komponen. Arsitektur utama Anda tetap bersih dan dapat diprediksi.
Kita menukar markup yang rapi dengan pemeliharaan yang lebih baik. Kita menerima kode yang berantakan selama pengembangan untuk memastikan sistem produksi yang stabil.
Bagaimana Anda mengelola CSS Anda? Apakah Anda menyukai utility class?