October 08, 2017

Apakah kita membutuhkan CSS Framework?

CSS framework sejak lama telah menjadi sangat populer di kancah pengembangan front-end. Framework ini menyediakan kode yang bisa Anda salin dan tempel di situs web Anda untuk menyusun keseluruhan tata letak dan UI.

Anda mungkin pernah membaca artikel tentang CSS Framework dan mengetahui bagaimana framework itu bekerja. Tapi disini saya akan menyoroti beberapa kekurangannya. Dan bagaimana mengatasi kekurangannya.

Ketika saya tanyakan hal ini ke beberapa teman, sebagian besar akan menjawab dengan alasan dibawah ini.

1. Kecepatan

Kebanyakan orang percaya itu akan membuat load halaman lebih cepat.

2. Desain

Dari segi design, CSS framework mempermudah untuk pemula. Banyak pengembang yang ingin meluncurkan sesuatu tetapi meraka tidak memiliki designer. Dan CSS Framwork menyediakan pengembangan design dasar yang bisa digunakan. Dan itu membuat semua terlihat sama diantara situs yang menggunakan Framework yang sama.

Selektor CSS yang lebih spesifik

Sekali lagi, ini bukan masalah intrinsik pada kerangka kerja, tapi sesuatu yang dapat kita amati di yang paling populer: ada kecenderungan untuk menggunakan penyeleksi yang sangat spesifik untuk membuat aturan CSS. Contohnya:

.table-responsive > .table-bordered > thead > tr > th:first-child

Apa yang terjadi jika Anda perlu mengganti beberapa properti Anda ? Maka Anda perlu membuat pemilih yang lebih spesifik lagi! Anda tidak bisa begitu saja dengan membuat aturan umum seperti:

th.important-heading { color: #000; }
Sebagai gantinya Anda perlu membuat peraturan seperti ini:
.table-responsive > .table-bordered > thead > tr > th:first-child.important-heading {
  color: #000;
}

Aturan yang tidak kamu butuhkan

Jika Anda menyertakan keseluruhan kerangka, bukan hanya bit yang benar - benar Anda butuhkan, Anda akan memiliki aturan CSS yang sebenarnya tidak Anda gunakan .

Tentu saja Anda dapat mengurangi hal ini dengan bantuan alat pasca-pengolahan untuk menghapus peraturan yang tidak terpakai, namun saat Anda mulai menambahkan atau menghapus kelas secara dinamis dengan JavaScript, Anda tidak akan pernah 100% yakin bahwa Anda tidak memerlukan kode itu.

CSS yang tidak terpakai tidak hanya membuat file Anda lebih besar, yang bisa menjadi masalah bagi perangkat seluler yang terhubung ke jaringan seluler daripada wi-fi, namun juga membuat basis kode Anda lebih besar, dan karena itu sulit dipertahankan.