Pada artikel ini, kita akan membahas:

• bagaimana cara kerja tiap pendekatan,

• kelebihan & kekurangannya,

• contoh implementasi,

• dan kapan harus memilih masing-masing untuk kebutuhan proyekmu.

🔹 1. CSS Modules

CSS Modules adalah file .module.css di mana setiap kelas hanya berlaku untuk komponen tertentu. Ini menghindari masalah klasik CSS seperti “global conflicts” atau “class name collision”.

Cara Kerja

Sebelum build:

/* button.module.css */
.btn {
  background: blue;
  color: white;
}

Setelah build, diubah menjadi nama unik:

.btn_9sd83f

Dan dipakai seperti ini:

import styles from './button.module.css';

<button className={styles.btn}>Click Me</button>

Kelebihan

• Scoping otomatis → tidak takut class tabrakan

• Ringan & native (tanpa runtime JS)

• Tetap pakai CSS murni → mudah dipelajari

• Sangat cocok untuk proyek yang sudah punya struktur CSS awal

Kekurangan

• Kurang praktis untuk style dinamis (theme switch, variant button, dsb)

• Tidak punya utility class yang kaya seperti Tailwind

• Masih perlu membuat struktur CSS sendiri (variables, mixins, dsb)

Cocok digunakan saat:

• Kamu ingin CSS murni tanpa runtime tambahan

• Project kecil-menengah dengan banyak komponen reusable

• Kamu tidak ingin bergantung ke framework styling tertentu

🔹 2. Tailwind CSS

Tailwind adalah utility-first CSS framework — kita menulis style langsung di dalam className.

Cara Kerja

<button className="px-4 py-2 bg-blue-600 text-white rounded-lg">
  Click Me
</button>

Bagus untuk membangun UI cepat dan konsisten.

Kelebihan

• Sangat cepat untuk styling → tidak perlu bolak-balik file

• Utility classes lengkap (spacing, colors, layout, responsive)

• Konsistensi desain lebih mudah dijaga

• Ukuran bundle kecil (purge CSS hanya menyisakan class yang dipakai)

Kekurangan

• HTML bisa terlihat “berantakan” karena banyak class

• Membuat custom component styles yang kompleks sedikit tricky

• Perlu adaptasi bagi yang terbiasa dengan CSS tradisional

• Dependensi framework tertentu → tidak pure CSS

Cocok digunakan saat:

• Kamu ingin membangun UI cepat dan konsisten

• Banyak membuat produk MVP atau dashboard

• Kamu butuh design system ringan tanpa ribet

• Timmu ingin mempercepat development tanpa banyak CSS manual

🔹 3. CSS-in-JS (Styled Components, Emotion, Jotai UI, dsb.)

CSS-in-JS berarti menulis CSS langsung dalam JavaScript, biasanya dengan sintaks tagged template atau object style.

Contoh Styled Components

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 8px 16px;
`;

Kelebihan

• Style & logic tersatukan dalam satu komponen → modular

• Sangat mudah membuat variant dinamis (props)

• Mendukung theming dengan sangat baik

• Bagus untuk UI library skala besar

Kekurangan

• Ada runtime cost (lebih berat dibanding CSS Modules)

• Kadang membuat bundle size lebih besar

• Kompleks pada aplikasi high-performance

• Perlu library terpisah (styled-components, emotion)

Cocok digunakan saat:

• Kamu membuat design system atau UI library

• Kamu butuh theming dinamis (dark/light, multi-brand)

• Kamu ingin style yang berubah berdasarkan props/logic

• Project besar yang butuh fleksibilitas tinggi

🔥 Perbandingan Singkat

🎯 Kapan Memilih Mana? (Guideline Praktis)

Pilih CSS Modules jika:

✔ Kamu ingin menggunakan CSS murni
✔ Tidak mau runtime tambahan
✔ Project tidak memerlukan theming kompleks
✔ Kamu ingin isolasi class yang rapi

Pilih Tailwind jika:

✔ Kamu ingin development tercepat
✔ Ingin konsistensi UI tanpa banyak mikir CSS
✔ Banyak membangun dashboard atau aplikasi internal
✔ Designer & developer ingin satu bahasa style

Pilih CSS-in-JS jika:

✔ Kamu membangun design system skala besar
✔ Butuh tema & variant dinamis
✔ Butuh style yang bergantung pada props/logic
✔ Membuat komponen UI sangat reusable

🧠 Kesimpulan

Setiap teknik punya tempatnya masing-masing. Tidak ada yang paling “benar”, yang ada hanyalah yang paling cocok untuk kebutuhan proyek.

• CSS Modules → simpel, cepat, tanpa runtime.

• Tailwind → cepat, konsisten, pragmatis.

• CSS-in-JS → fleksibel, perfect untuk design system & UI library.

Jika kamu bekerja di hybrid environment (React + multiple micro-app), seringkali kombinasi Tailwind + CSS Modules adalah setup paling optimal.

✍️ Tentang Penulis

Saya Dimas Prasetyo, Frontend Engineer yang berfokus pada React, Angular dan Vue, Web Performance, dan arsitektur UI modern. Saya suka membagikan artikel tentang frontend, modern tooling, dan pengalaman real-world di proyek produksi.