Mengapa Saya Lebih Suka Vanilla CSS Daripada Bootstrap?

Please don’t get me wrong, saya suka Bootstrap dan sering menggunakannya untuk membuat website. Tetapi, walaupun CSS framework yang satu ini ibarat tongkat sakti yang memangkas waktu pengembangan sekaligus menghindarkan kita dari sakit kepala yang tak perlu, vanilla/plain CSS tetap lebih baik.

Tulisan ini sendiri berangkat dari keresahan saya ketika menemukan banyak front-end developer senior yang mengaku tak pernah lagi ngoding CSS. Kalau senior mah bebas-bebas saja karena mereka tahu apa yang mereka lakukan. Sayangnya, banyak para pemula yang kemudian mengikuti jejak mereka sehingga tidak belajar CSS melainkan langsung ke framework.

Padahal, vanilla/plain CSS (CSS asli yang ditulis tanpa framework) adalah pondasi yang harus dikuasai oleh para developer. Bahkan, untuk menjadi web developer kita disarankan untuk belajar CSS dulu sebelum belajar bahasa pemrograman .

Kekurangan Bootstrap Dibandingkan dengan Vanilla CSS

Kita bahas dulu kekurangannya. Hal-hal ini jugalah yang membuat saya jarang menggunakan class Bootstrap seluruhnya.

1. Deklarasi !important

Poin pertama adalah deklarasi !important yang di-render bila kita menggunakan class Bootstrap tertentu. Well, kebanyakan class, sebetulnya. Sebagai contoh, jika kita menambahkan class="bg-light" pada sebuah elemen seperti ini <p class="bg-light">Contoh paragraf dengan background abu-abu-muda.</p>, maka class tersebut akan di-render menjadi:

bg-light {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
}

Ini tidak akan menjadi masalah jika hanya satu atau dua elemen. Tetapi, bagaimana kalau banyak? Kita semua tahu bahwa deklarasi !important hanya digunakan di saat-saat genting. Bila terlalu banyak akan membuat kode sulit di-maintain dan meruntuhkan CSS specificity secara keseluruhan.

Itu sebabnya meski menggunakan Bootstrap, saya hanya menggunakan class yang tidak memberikan deklarasi !important yang sayangnya tidak banyak. Untuk kasus-kasus tertentu atau jika sedang rajin, biasanya saya hanya menggunakan Bootstrap untuk grid system atau layouting, lain tidak.

2. Too Much Div

Bootstrap sangat membantu, terutama dalam layouting. Saya masih merasa bahwa grid system Bootstrap sangat powerful. TETAPI, untuk menggunakannya, kita akan memerlukan banyak sekali <div>. Misalnya:

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Itu hanya untuk grid, belum lagi komponen lain yang lebih banyak lagi menggunakan <div>. Contohnya komponen card. Saking banyaknya, sampai berundak-undak mirip candi. Selain tidak efektif, secara semantik juga tidak terlalu bagus.

Maka, saya sendiri kerap mengakali hal ini dengan memberikan class Boostrap pada tag semantic. Contoh:

<section class="row">
  <div class="col-md-4">
  </div>

  <div class="col-md-8">
  </div>
</section>

3. Unused CSS

Ini sudah lama menjadi isu saat menggunakan CSS framework. Bagi yang belum familiar, unused CSS adalah kode CSS yang sudah ditulis dan ada di file CSS web kita, tapi kode-kode tersebut tidak digunakan. Semakin banyak kode CSS, artinya semakin banyak yang harus dikerjakan oleh browser, dan ini akan mempengaruhi kecepatan loading website .

Bootstrap hari ini sudah modular dan jika kita menggunakan Sass, kita punya pilihan untuk memasukkan hanya CSS yang akan digunakan lalu menghapus sisanya. Sayangnya, itu tidak bisa dilakukan bila kita menggunakan Bootstrap tapi tak memiliki akses untuk memodifikasi core file-nya. Misalnya, saat membuat template Blogspot.

4. Terlalu Banyak Ikut Campur

Yah, namanya juga framework, classes yang mereka sediakan adalah kemudahan, tetapi juga kelemahan karena terlalu banyak ikut campur. Bagi saya CSS framework adalah paradoks: kebebasan sekaligus kekangan.

5. Atribut yang Terlalu Panjang

Saya tipe developer yang lebih suka menggunakan sedikit class saat ngoding. Sebisa mungkin membuat class yang akan digunakan secara global atau tidak terlalu spesifik agar file CSS tidak terlalu panjang.

Menggunakan framework berarti kita akan menambahkan class milik framework tersebut ke dalam HTML yang artinya akan membuat atributnya semakin panjang dan sulit dibaca. Apalagi jika kita sedang ngoding template WordPress , class WordPress sendiri sudah panjang dan bermacam-macam. Kalau ditambah dengan class-nya framework + class kita sendiri = loba pisan!

Contoh:

<div class="col-md-6 card justify-content-center section section__story bg-light mt-5">
  
</div>

Barangkali ini pulalah yang membuat hati saya belum tergerak untuk menggunakan Tailwind.

Kelebihan Bootstrap Daripada Vanilla CSS

Dibandingkan vanilla CSS, Bootstrap punya beberapa keunggulan.

1. Grid System

Para front-end developer pasti setuju bahwa CSS layouting atau ngoding grid system untuk website sering membuat sakit kepala. Untuk membuat sekadar landing page satu halaman mah, tanpa framework juga cingcai. Tapi untuk satu website? Hahahaha tentu saja tidak!

Di sinilah Boostrap dan class container-nya mengambil peranan penting. Kita tak perlu pusing-pusing ngoding CSS untuk menata letak elemen-elemen, tak terlalu pusing dengan margin dan padding. Tak perlu dihadapkan pada dilema kapan harus menggunakan grid dan kapan harus menggunakan flex.

Dan ini yang paling penting: responsif. Grid system-nya Bootstrap sudah mengakomodasi berbagai ukuran layar. Bahkan, jika suatu saat Samsung ngide membuat smarthpone dengan ukuran layar mahiwal dan dilipat-lipat macem origami lagi, saya yakin grid system Bootstrap bisa mengatasi itu.

2. Spesifik

Misalnya begini, kita ingin membuat SATU ELEMEN menjadi rata tengah atau centering. Dari 3 juta elemen, tidak ada elemen lain yang rata tengah, hanya satu elemen itu.

3. Efektif

Dalam kasus-kasus tertentu, misalnya untuk membuat accordion diperlukan berbaris-baris kode CSS dan JavaScript. Dengan menggunakan Boostrap, kita hanya perlu memberikan satu class="accordion" pada elemen tersebut. Ini jelas bermanfaat, terutama untuk developer haroreaman.

4. Menu Navigasi

Komponen lain yang paling sulit dibuat adalah menu navigasi. Bukan sulit, sih, tapi renced kalau kata urang Sunda mah alias terlalu banyak kode CSS yang harus ditulis dan harus detail.

Bootstrap mengangkat beban ini dari pundak kita sehingga kita bisa fokus pada beban yang lain. Hahaha.

Kesimpulannya, Bootstrap hanyalah alat bantu, sama seperti framework atau library lainnya. Walau sejak kedatangannya banyak front-end developer yang mengaku “Gue enggak lagi ngoding CSS”, alat tetaplah alat. Hanya digunakan bila diperlukan.

Keberadaan CSS framework memang sangat membantu, tetapi saya kira itu tidak akan menggantikan plain CSS secara keseluruhan.

Anyway, artikel ini hanya opini saya pribadi sebagai personal dan profesional (((profesional))). Bila Anda memiliki pendapat yang berbeda, mari kita diskusikan. Saya akan dengan senang hati mendengar argumen Anda. (eL)