Menguasai CSS Variables: Variables yang Mengubah Cara Kita Styling

CSS Variables atau CSS Custom Properties adalah fitur yang sering underrated padahal sangat powerful. Dengan CSS Variables, Anda bisa membuat kode yang lebih maintainable, themeable, dan mudah diubah-ubah. Mari kita深入探讨 fitur amazing ini!

Apa itu CSS Variables?

CSS Variables adalah nilai yang dapat digunakan kembali di seluruh stylesheet. Mereka didefinisikan dengan double dash (--) dan diakses menggunakan fungsi var().

:root {
  --primary-color: #3b82f6;
  --secondary-color: #10b981;
  --spacing-unit: 8px;
}

Dasar-Dasar Penggunaan

Mendefinisikan dan menggunakan CSS Variables sangat mudah:

/* Mendefinisikan */
:root {
  --font-primary: 'Inter', sans-serif;
  --container-width: 1200px;
}

/* Menggunakan */
body {
  font-family: var(--font-primary);
}

.container {
  max-width: var(--container-width);
}

Fallback Values

Salah satu fitur awesome dari CSS Variables adalah kemampuan memberikan fallback value:

/* Jika --text-color tidak ada, gunakan blue */
p {
  color: var(--text-color, blue);
}

Theming dengan CSS Variables

CSS Variables sempurna untuk membuat dark mode atau theme switching:

:root {
  --bg-color: #ffffff;
  --text-color: #1f2937;
  --card-bg: #f3f4f6;
}

/* Dark Mode */
[data-theme="dark"] {
  --bg-color: #1f2937;
  --text-color: #f9fafb;
  --card-bg: #374151;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Toggle theme dengan JavaScript */
document.documentElement.setAttribute('data-theme', 'dark');

Menggunakan dalam JavaScript

Anda dapat membaca dan mengubah CSS Variables secara dinamis:

// Membaca nilai
const primaryColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color').trim();

// Mengubah nilai
document.documentElement.style.setProperty('--primary-color', '#ff0000');

Responsive Design dengan CSS Variables

Buat layout yang responsif dengan mudah:

:root {
  --container-padding: 16px;
  --font-size-base: 16px;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 24px;
    --font-size-base: 18px;
  }
}

.container {
  padding: var(--container-padding);
}

body {
  font-size: var(--font-size-base);
}

Architecture yang Baik

Gunakan naming convention yang konsisten:

:root {
  /* Colors - Brand */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;

  /* Colors - Neutral */
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-800: #1f2937;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Typography */
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Merriweather', serif;
}

Keuntungan Menggunakan CSS Variables

Maintainability - Ubah nilai di satu tempat, apply di seluruh stylesheet
Themeability - Mudah switch antar theme
Dynamic - Dapat diubah via JavaScript
Readability - Kode lebih mudah dibaca dengan nama yang meaningful
Responsive - Nilai berbeda untuk breakpoint berbeda

Kesimpulan

CSS Variables adalah game-changer dalam cara kita menulis CSS. Dengan memahami dan mengimplementasikan CSS Variables dengan baik, Anda akan membuat kode yang lebih clean, maintainable, dan profesional.

Mulai gunakan CSS Variables hari ini dan rasakan perbedaannya!

Happy coding! 🚀

⟵ Back to posts