1. CSS Variables (Custom Properties)

Konsep Dasar

CSS Variables (atau custom properties) memungkinkan kita mendefinisikan nilai yang dapat digunakan ulang di seluruh stylesheet.

Contoh:

:root {
  --primary-color: #3498db;
  --padding: 1rem;
}

.button {
  background-color: var(--primary-color);
  padding: var(--padding);
}

Kelebihan

• Nilai dapat digunakan ulang di banyak tempat.
  
• Bisa diubah berdasarkan scope tertentu.
  
• Dapat di-update secara dinamis melalui JavaScript.
  
• Mendukung fallback value.
  

Scope dan Cascade

Custom properties tunduk pada aturan cascade CSS. Kita bisa override variabel dalam konteks tertentu.

:root {
  --text-color: black;
}

.theme-dark {
  --text-color: white;
}

p {
  color: var(--text-color);
}

Update Melalui JavaScript

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Fallback Value

color: var(--undefined-color, blue); /* fallback jika variabel tidak tersedia */

2. Struktur CSS Modular

Tujuan

Modularisasi bertujuan agar kode CSS lebih terstruktur, mudah dipelihara, dan scalable seiring membesarnya proyek.

Pendekatan Modular

1. Atomic CSS / Utility-first (contohnya: Tailwind)

Pendekatan ini membuat class yang hanya mengatur satu properti.

Contoh:

<div class="text-center p-4 bg-blue-500">...</div>

Kelebihan: Konsisten, cepat digunakan.
Kekurangan: HTML bisa menjadi panjang.

2. OOCSS (Object-Oriented CSS)
   Pisahkan struktur (object) dan skin (appearance).

Contoh:

.media {
  display: flex;
  align-items: flex-start;
}

.media-img {
  margin-right: 1rem;
}

3. BEM (Block Element Modifier)
   Menggunakan penamaan konvensi block__element--modifier.

Contoh:

<div class="card card--highlighted">
  <div class="card__header">Title</div>
</div>

.card {}
.card__header {}
.card--highlighted {}

4. Component-Based Structure
   Mengorganisasi kode CSS berdasarkan komponen UI.

Contoh struktur folder:

components/

├── button/
│   ├── button.css
├── card/
│   ├── card.css

3. Praktik Terbaik CSS Modular dan Variables

Kombinasi dengan Preprocessor

Bisa dikombinasikan dengan SCSS untuk memudahkan struktur dan logic.

:root {
  --primary-color: #0055ff;
  --font-base: 16px;
}

.button {
  padding: var(--spacing-sm, 8px);
  font-size: var(--font-base);
}

Menggunakan Design Token

Design token menyimpan nilai desain (seperti warna, spacing, dsb) dalam format JSON atau YAML, lalu dikonversi ke CSS.

Contoh:

{
  "color": {
    "primary": "#0055ff"
  },
  "spacing": {
    "sm": "8px",
    "md": "16px"
  }
}

4. Tips Menggunakan CSS Variables dalam Proyek Besar

Grouping Berdasarkan Kategori

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-text: #333333;

  /* Typography */
  --font-size-base: 16px;
  --font-weight-bold: 700;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
}

Mengatur Tema dengan Data Attribute

:root[data-theme='dark'] {
  --color-bg: #121212;
  --color-text: #fafafa;
}

Integrasi dengan JavaScript Framework

document.documentElement.setAttribute('data-theme', 'dark');

5. Studi Kasus: Struktur Modular + CSS Variables

Contoh struktur folder:

/styles/

├── base/
│   ├── _reset.css
│   └── _typography.css
├── components/
│   ├── button.css
│   ├── card.css
├── layout/
│   ├── header.css
│   └── grid.css
├── utils/
│   ├── _variables.css
│   └── _mixins.css
└── main.css

Isi main.css:

@import './utils/variables.css';
@import './base/reset.css';
@import './base/typography.css';
@import './layout/grid.css';
@import './components/button.css';

6. Tools dan Workflow Pendukung

Beberapa alat bantu yang umum digunakan dalam workflow CSS modular:

• PostCSS: untuk menambahkan fitur modern CSS dan fallback.
  
• Stylelint: linting CSS agar konsisten.
  
• SCSS atau LESS: untuk nesting, function, dan mixin.
  
• Design Token Generator: seperti style-dictionary.
  
• CSS Modules: untuk proyek React.
  
• Tailwind / Windi CSS: untuk utility-first framework.
  

Kesimpulan

Topik	Manfaat
CSS Variables	Memungkinkan styling yang reusable dan dapat diubah secara dinamis
Struktur CSS Modular	Membuat CSS lebih terorganisir, maintainable, dan scalable
Kombinasi keduanya	Cocok untuk proyek skala besar dengan tim multi-developer