Beyond Tailwind & Bootstrap: Eksplorasi Membangun Desain Sistem Unik Tanpa Framework Populer

Pernah membuka beberapa website berbeda, tetapi merasa tampilannya hampir sama? Mulai dari susunan tombol, bentuk kartu, jarak antarelemen, hingga navigasinya, semuanya terlihat seperti menggunakan pola desain yang serupa. Hal ini sebenarnya tidak mengherankan. Banyak pengembang mengandalkan framework CSS populer seperti Tailwind CSS dan Bootstrap karena keduanya mampu mempercepat proses pembuatan website.

Namun, kemudahan tersebut terkadang membawa konsekuensi. Website yang dibangun dengan pendekatan serupa bisa kehilangan karakter visualnya. Selain itu, penggunaan framework juga dapat menambah dependensi yang belum tentu dibutuhkan oleh setiap proyek.

Bukan berarti framework populer harus ditinggalkan. Dalam kondisi tertentu, keduanya tetap menjadi pilihan yang masuk akal. Akan tetapi, ada alternatif Tailwind CSS dan Bootstrap yang menarik untuk dipertimbangkan, yaitu membangun custom design system menggunakan kemampuan CSS modern.

Pendekatan ini memberikan kebebasan lebih besar dalam menentukan tampilan, mengatur struktur kode, dan menyesuaikan komponen dengan kebutuhan proyek. Menariknya, CSS saat ini sudah memiliki banyak fitur bawaan yang dahulu sering membutuhkan bantuan library tambahan.

Masalah Homogenitas Web Akibat Framework Populer

Tampilan Website Modern yang Kian Seragam

Framework CSS menawarkan banyak kemudahan. Pengembang dapat membuat tombol, navigasi, formulir, dan sistem grid tanpa harus menulis seluruh aturan CSS dari awal.

Sayangnya, jika tidak disertai kreativitas dalam perancangan, hasil akhirnya bisa terlihat mirip dengan website lain.

Misalnya, banyak website menggunakan kartu dengan sudut membulat, bayangan tipis, tombol berwarna mencolok, dan tata letak yang hampir sama. Pola tersebut memang praktis, tetapi belum tentu mencerminkan identitas sebuah merek.

Masalahnya bukan terletak pada framework itu sendiri, melainkan pada cara penggunaannya. Ketika pengembang hanya mengandalkan komponen bawaan tanpa melakukan penyesuaian, karakter desain menjadi kurang menonjol.

Membangun sistem desain sendiri memberikan kesempatan untuk menentukan identitas visual sejak awal. Warna, tipografi, jarak, hingga perilaku komponen dapat disesuaikan dengan karakter website.

Isu Dependensi dan Bloatware Kode yang Tidak Terpakai

Selain tampilan, ukuran dan kompleksitas kode juga perlu diperhatikan. Beberapa proyek menggunakan framework dengan banyak fitur, padahal kebutuhan sebenarnya hanya sebatas membuat beberapa komponen sederhana.

Akibatnya, pengembang harus mengelola dependensi, konfigurasi, dan proses pembaruan yang mungkin tidak terlalu diperlukan.

Pada framework utility-first seperti Tailwind CSS, proses build biasanya dapat menghilangkan class yang tidak digunakan. Karena itu, tidak tepat jika semua proyek Tailwind dianggap menghasilkan file CSS besar. Meski demikian, konfigurasi tambahan dan kompleksitas workflow tetap perlu dipertimbangkan.

Dengan CSS modern, pengembang dapat menulis aturan yang benar-benar diperlukan. Tidak ada kewajiban memasang framework hanya untuk membuat tombol atau mengatur jarak antarelemen.

Pendekatan ini cocok untuk website yang membutuhkan kontrol penuh terhadap struktur CSS dan ingin mempertahankan dependensi seminimal mungkin.

Fitur CSS Modern yang Mengubah Permainan

CSS telah berkembang cukup jauh. Beberapa fitur yang dahulu membutuhkan bantuan JavaScript atau framework tambahan kini dapat dilakukan langsung melalui browser modern.

Native CSS Variables dan CSS Nesting

CSS Variables memungkinkan pengembang menyimpan nilai tertentu agar dapat digunakan berulang kali. Contohnya warna utama, ukuran teks, dan jarak antarkomponen.

Berikut contoh sederhananya:

:root {
  --primary: #2457d6;
  --text-main: #222;
  --surface: #ffffff;
  --spacing: 1rem;
  --radius: 12px;
}

.button {
  background: var(--primary);
  padding: var(--spacing);
  border-radius: var(--radius);
  color: white;
}

Keuntungannya cukup terasa ketika website mengalami perubahan desain. Jika warna utama perlu diganti, pengembang cukup memperbarui satu variabel tanpa mencari setiap deklarasi warna di seluruh stylesheet.

Fitur lain yang menarik adalah CSS Nesting. Penulis CSS dapat mengelompokkan aturan elemen yang memiliki hubungan, sehingga struktur kode lebih mudah dibaca.

.card {
  padding: 1rem;
  border-radius: 12px;

  & h2 {
    font-size: 1.25rem;
  }

  & p {
    color: #666;
  }
}

Penulisan seperti ini membuat hubungan antara elemen induk dan turunannya terlihat lebih jelas. Hasilnya, stylesheet dapat dikelola dengan lebih teratur tanpa harus bergantung pada preprocessor tertentu untuk kebutuhan nesting dasar.

Container Queries untuk Fleksibilitas Modular

Salah satu tantangan dalam responsive design adalah memastikan komponen tetap terlihat baik di berbagai ukuran layar.

Media queries biasanya bekerja berdasarkan kondisi viewport atau area tampilan browser. Namun, terkadang sebuah komponen ditempatkan pada area yang lebih kecil meskipun layar perangkat cukup lebar.

Container Queries menawarkan solusi untuk kondisi tersebut. Komponen dapat menyesuaikan tampilannya berdasarkan ukuran container tempat komponen berada.

Contohnya:

.product-wrapper {
  container-type: inline-size;
}

.product-card {
  display: block;
}

@container (min-width: 500px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Pada contoh tersebut, kartu produk akan menggunakan tata letak dua kolom ketika container mencapai lebar tertentu.

Fitur ini sangat berguna untuk membuat komponen modular. Satu komponen dapat digunakan pada sidebar, halaman utama, maupun area konten tanpa harus memiliki aturan responsif yang sepenuhnya bergantung pada ukuran layar.

@layer untuk Kontrol Spesifisitas Gaya Bebas Konflik

Ketika proyek semakin besar, konflik CSS sering menjadi masalah. Satu aturan dapat menimpa aturan lainnya, terutama jika beberapa stylesheet berasal dari sumber berbeda.

CSS Cascade Layers melalui @layer membantu mengatur prioritas kelompok aturan secara lebih terstruktur.

Contohnya:

@layer reset, base, components, utilities;

@layer base {
  body {
    font-family: Arial, sans-serif;
  }
}

@layer components {
  .button {
    padding: 12px 20px;
    border-radius: 8px;
  }
}

Dengan pendekatan ini, pengembang dapat menentukan urutan prioritas layer sejak awal.

Hal tersebut mempermudah pengelolaan stylesheet ketika proyek memiliki banyak komponen dan aturan desain. Namun, penting dipahami bahwa urutan layer memiliki aturan cascade tersendiri dan tidak otomatis menyelesaikan seluruh konflik spesifisitas.

Langkah Membangun Design System Kustom dari Nol

Membuat custom design system tidak harus dimulai dengan sistem yang besar. Justru, lebih baik membangun fondasinya secara bertahap agar setiap komponen memiliki fungsi yang jelas.

Menentukan Design Token

Langkah pertama adalah menentukan design token. Istilah ini mengacu pada nilai desain yang digunakan secara konsisten di seluruh website.

Beberapa token dasar yang sebaiknya disiapkan meliputi:

• Warna: Warna utama, sekunder, latar belakang, teks, dan status seperti sukses atau peringatan.

• Tipografi: Jenis font, ukuran heading, ukuran paragraf, dan ketebalan tulisan.

• Spacing: Jarak standar untuk padding, margin, dan susunan elemen.

• Border radius: Tingkat kelengkungan sudut tombol, kartu, dan formulir.

• Shadow: Efek bayangan untuk membedakan tingkat kedalaman elemen.

Sebagai contoh, pengembang dapat membuat skala jarak menggunakan CSS Variables, mulai dari 4px, 8px, 16px, hingga 32px.

Standarisasi seperti ini membuat tampilan lebih konsisten. Pengembang juga tidak perlu menentukan nilai baru setiap kali membuat komponen.

Membangun Komponen Primitif yang Dapat Dipakai Ulang

Setelah token selesai, tahap berikutnya adalah membangun komponen dasar.

Mulailah dari elemen yang paling sering digunakan, seperti tombol, input, kartu, navigasi, dan badge.

Setiap komponen sebaiknya memiliki fungsi yang jelas serta mendukung beberapa variasi penggunaan.

Contohnya, tombol dapat memiliki variasi utama, sekunder, dan berbahaya. Ukurannya juga bisa disesuaikan tanpa harus membuat banyak class yang berbeda secara tidak konsisten.

Jangan terburu-buru membangun seluruh komponen sekaligus. Lebih baik menguji beberapa komponen terlebih dahulu, kemudian mengembangkannya berdasarkan kebutuhan nyata.

Dokumentasi juga sebaiknya dibuat sejak awal. Catat fungsi, variasi, aturan penggunaan, serta perilaku responsif setiap komponen. Dengan begitu, sistem desain lebih mudah dipahami ketika proyek berkembang atau dikerjakan bersama tim lain.

Analisis Perbandingan Framework Populer vs Solusi Kustom

Memilih antara framework populer dan CSS kustom sebenarnya bergantung pada kebutuhan proyek. Tidak ada satu pendekatan yang selalu unggul dalam semua kondisi.

Framework seperti Bootstrap dan Tailwind CSS cocok untuk proyek yang membutuhkan pengembangan cepat, memiliki tim yang sudah terbiasa dengan ekosistemnya, atau memerlukan sistem komponen yang telah tersedia.

Sebaliknya, solusi kustom menarik untuk website dengan identitas visual khusus, kebutuhan desain yang tidak biasa, atau proyek yang ingin membatasi dependensi eksternal.

Ada juga pendekatan gabungan. Pengembang dapat menggunakan CSS modern sebagai fondasi utama, kemudian mengambil library tertentu hanya ketika fitur tambahan benar-benar dibutuhkan.

Membangun website tanpa framework CSS populer bukan berarti kembali ke cara lama. Kemampuan CSS modern sudah cukup berkembang untuk menangani banyak kebutuhan desain yang sebelumnya membutuhkan bantuan library tambahan.

Dengan CSS Variables, Nesting, Container Queries, dan Cascade Layers, pengembang dapat membangun sistem desain yang lebih terstruktur serta fleksibel.

Jika ingin memulai, tentukan terlebih dahulu identitas visual website, buat design token, lalu kembangkan komponen primitif yang paling sering digunakan. Setelah itu, lakukan pengujian responsif dan dokumentasikan setiap perubahan.

Pada akhirnya, alternatif Tailwind CSS atau Bootstrap bukan sekadar soal menghindari framework populer. Tujuan utamanya adalah menemukan pendekatan yang paling sesuai dengan kebutuhan proyek.

Sebuah custom design system yang dirancang dengan baik dapat memberikan kebebasan visual, kontrol kode, dan konsistensi jangka panjang. Yang terpenting, pilih teknologi berdasarkan masalah yang ingin diselesaikan, bukan hanya karena sedang populer di kalangan pengembang website modern.