CSS Biasa vs CSS Modules - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. CSS di React: Mana yang Lebih Baik?

Ketika ngoding di React, kita sering menghadapi dilema: pakai CSS biasa atau CSS Modules? Kalau CSS biasa itu seperti baju bebas, semua komponen bisa pakai. Sedangkan CSS Modules lebih seperti baju custom yang cuma bisa dipakai oleh komponen tertentu.

2. CSS Biasa: Gaya Lama yang Masih Populer

CSS biasa (vanilla CSS) adalah cara klasik untuk menambahkan gaya ke elemen HTML. Bisa ditulis dalam file .css dan diimpor ke dalam komponen React.

Contoh Pemakaian CSS Biasa:

/* styles.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

// Button.js
import "./styles.css";

function Button() {
  return <button className="button">Klik Aku!</button>;
}

Kelebihan CSS Biasa:

 Mudah dipahami dan digunakan. Bisa digunakan secara global. Tidak perlu konfigurasi tambahan.

Kekurangan CSS Biasa:

 Kelas CSS bisa bentrok kalau namanya sama.  Sulit mengelola style di aplikasi besar.

3. CSS Modules: Solusi Anti Bentrok

CSS Modules adalah teknik yang memungkinkan kita menggunakan CSS yang scoped alias hanya berlaku untuk satu komponen saja. Caranya? Dengan menambahkan .module.css di nama file.

Contoh Pemakaian CSS Modules:

/* Button.module.css */
.button {
  background-color: red;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

// Button.js
import styles from "./Button.module.css";

function Button() {
  return <button className={styles.button}>Klik Aku!</button>;
}

Kelebihan CSS Modules:

 Tidak ada bentrok kelas CSS.  Lebih modular dan mudah dikelola.  Bisa digunakan di proyek skala besar.

Kekurangan CSS Modules:

 Perlu proses import di setiap file.  Tidak se-global CSS biasa.

4. Mana yang Harus Dipilih?

Fitur	CSS Biasa	CSS Modules
Scope	Global	Lokal
Risiko Bentrok	Ada	Tidak
Kemudahan	Sangat Mudah	Sedikit Lebih Rumit
Skala Proyek	Kecil-Menengah	Menengah-Besar

Kalau proyek kecil, CSS biasa sudah cukup. Tapi kalau proyek besar dengan banyak komponen, CSS Modules bisa jadi solusi terbaik!

5. Kesimpulan

 CSS Biasa lebih sederhana dan mudah digunakan, tapi rentan bentrok.  CSS Modules lebih aman dari bentrok, cocok untuk proyek besar.  Pilih yang paling sesuai dengan kebutuhan proyekmu!

Jadi, kamu tim CSS biasa atau CSS Modules?