CSS Variables Demo

📌 Elements

💡 Fundamental Variables

CSS Variables (Custom Properties) memungkinkan Anda menyimpan nilai yang dapat digunakan kembali dalam stylesheet Anda, membuat pengelolaan desain lebih konsisten dan mudah di-maintain.

variables.css

          
            /* Deklarasi variabel global */

            :root {

              --primary-color: #9333ea;

              --secondary-color: #a855f7;

              --text-color: #333;

              --spacing-unit: 1rem;

            }

            /* Menggunakan variabel */

            .header {

              background: var(--primary-color);

              padding: calc(var(--spacing-unit) * 2);

            }

            /* Variabel dengan fallback */

            .btn {

              background: var(--btn-color, var(--primary-color));

            }

📝 Penjelasan Detail:

• :root - Scope global untuk variabel CSS
• --variable-name - Sintaks deklarasi variabel CSS
• var() - Fungsi untuk menggunakan variabel
• calc() - Perhitungan dengan variabel
• var(--var, fallback) - Fallback value jika variabel tidak ada

🛠️ Features

advanced-variables.css

          
            /* Variabel dalam media queries */

            :root {

              --base-font: 1rem;

            }

            @media (min-width: 768px) {

              :root {

                --base-font: 1.2rem;

              }

            }

            /* Variabel dalam pseudo-class */

            button:hover {

              background: var(--hover-color);

            }

            /* Variabel untuk animasi */

            .box {

              --scale: 1;

              transform: scale(var(--scale));

              transition: transform 0.3s;

            }

            .box:hover {

              --scale: 1.1;

            }

ℹ️ Browser Support

CSS Variables didukung di semua browser modern (Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+). IE11 tidak mendukung.

📊 Basic Tables

variables-values.css

          
            /* Common Variable Types */

            --color-primary   /* Warna utama */

            --spacing-small  /* Jarak kecil (8px) */

            --font-size-base /* Ukuran font dasar (1rem) */

            --border-radius  /* Radius border (4px) */

            --transition-time /* Durasi transisi (0.3s) */

            /* Naming Convention */

            --component-name-property /* BEM-style */

            --theme-color-primary  /* Berdasarkan tema */

            --state-hover-color  /* Berdasarkan state */

📝 Penjelasan Detail:

• Color Variables - Untuk warna utama, sekunder, dll.
• Spacing Variables - Untuk padding, margin, dan gap yang konsisten.
• Typography Variables - Untuk ukuran font, line-height, dll.
• Effect Variables - Untuk shadow, transition, dll.
• Naming Convention yang baik penting untuk maintainability

🚀 Advanced Table

advanced-variables.css

          
            /* Variabel dalam JavaScript */

            element.style.setProperty('--primary-color', '#9333ea');

            /* Variabel untuk dark mode */

            :root {

              --bg-color: white;

              --text-color: black;

            }

            .dark-mode {

              --bg-color: #222;

              --text-color: white;

            }

            /* Variabel untuk theming */

            .theme-purple {

              --primary: #9333ea;

              --secondary: #a855f7;

            }

            .theme-blue {

              --primary: #2563eb;

              --secondary: #3b82f6;

            }

ℹ️ Browser Support

Manipulasi variabel CSS dengan JavaScript didukung di semua browser yang mendukung CSS Variables. Untuk kompatibilitas maksimal, gunakan polyfill untuk IE11 jika diperlukan.

💡 Pro Tips

🎯 Best Practices

Gunakan CSS Variables untuk membuat sistem desain yang konsisten, mudah di-maintain, dan dapat dikustomisasi.

best-practices.css

          
            /* ✅ Good - Organized and reusable */

            :root {

              /* Colors */

              --color-primary: #9333ea;

              --color-secondary: #a855f7;

              /* Spacing */

              --space-sm: 0.5rem;

              --space-md: 1rem;

            }

            /* ❌ Avoid - Unorganized and hard to maintain */

            .header {

              --color1: #9333ea;

              --space1: 10px;

            }

            .footer {

              --color2: #a855f7;

              --space2: 15px;

            }

📝 Penjelasan Detail:

• Organize by category - Kelompokkan variabel berdasarkan jenis (warna, spacing, dll)
• Use semantic names - Nama yang deskriptif (--color-primary bukan --color1)
• Define globally first - Mulai dengan :root untuk variabel global
• Scope appropriately - Gunakan scope komponen untuk variabel spesifik
• Document your variables - Tambahkan komentar untuk penjelasan