Hello people with the spirit of learning!
Sebagai seorang web developer kalian pasti tahu bahwa membuat kode program yang repetitif adalah suatu hal yang buruk dalam pengembangan web. Itulah mengapa kalian perlu mempelajari cara menggunakan CSS Variables untuk mengurangi penulisan kode CSS yang berulang dan sia-sia.
Untuk menghasilkan aplikasi web yang menarik dan diminati para user, diperlukan desain yang lebih kompleks dan memiliki beragam styles. Hal ini memaksa developers menggunakan values, color dan elemen lainnya secara berulang.
Untungnya, modern stylesheet mendukung penggunaan CSS Variabel, yang memungkinkan kalian mengurangi pengulangan dalam codebase kalian. Selain itu, kalian tidak perlu menggunakan alat eksternal seperti CSS modules, Less, atau SASS untuk menerapkannya!
Pada artikel ini, kalian akan mempelajari cara efektif menggunakan CSS Variable, mulai dari contoh dasar dalam plain HTML dan CSS hingga framework yang lebih canggih seperti React dan Next.JS.
Apa Itu CSS Variables?🤔
CSS Variables, juga dikenal sebagai CSS Custom Properties, merupakan fitur dalam CSS yang memungkinkan pengembang mengelola dan meggunakan kembali values dalam stylesheet CSS. Dalam hal ini, pengembang dapat mendefinisikan kembali nilai-nilai tertentu, seperti warna, ukuran, atau bahkan pengaturan kompleks seperti gradient atau shadow, untuk didefinisikan kembali dan digunakan di berbagai tempat dalam stylesheet tersebut.
Dengan menggunakan variabel CSS, pengembang dapat membuat kode mereka lebih mudah dikelola dan diperbarui, karena perubahan pada variabel hanya perlu dilakukan di satu tempat untuk mempengaruhi semua tempat penggunaannya dalam stylesheet. Variabel CSS berguna terutama dalam menghindari pengulangan kode dan dalam mempertahankan konsistensi gaya di seluruh proyek web.
Penerapan CSS Variables ini akan membantu developer ketika membuat fitur seperti mode gelap. Berikut beberapa manfaat penggunaan CSS Variables:
- Fleksibilitas: CSS Variables memungkinkan pengembang untuk mendefinisikan dan menggunakan kembali nilai-nilai tertentu dalam stylesheet
- Maintenance yang Lebih Mudah: Perubahan dalam gaya atau tema dapat dilakukan dengan hanya memodifikasi nilai variabel, tanpa perlu mengubah banyak bagian kode secara manual.
- Kustomisasi yang Lebih Fleksibel: Memungkinkan pengembang untuk dengan mudah menyesuaikan warna, ukuran, dan atribut gaya lainnya dengan hanya mengubah nilai variabel yang sesuai.
- Meningkatkan Reliability Kode: Pengembang dapat membuat kode menjadi lebih konsisten dan dapat diandalkan
Cara Membuat CSS Variables
Mendeklarasikan variabel CSS caranya mudah. Pertama, Kalian perlu membuat selector :root, yaitu elemen yang terletak paling atas dalam dokumen HTML, sehingga variabel yang nantinya dibuat dapat digunakan secara global.
Dalam mendefinisikan variabel CSS, diawali dengan tanda - - , lalu diikuti dengan nama variabelnya. Perhatikan sintaks berikut.
:root {
/* Backgrounds */
--primary-background: #EDEDED;
/* Colors */
--primary-text-color: #B0C3FF;
}Setiap variabel dimulai dengan -- , diikuti oleh nama: --primary-background atau --primary-text-color . Terakhir, kalian bisa memberikan nilai kepada variabel-variabel tersebut.
Dengan menggunakan cara ini, kalian dapat mengubah warna situs web hanya dengan memodifikasi nilai-nilai dari variabel-variabel tersebut. Easy, bukan?
Setelah kalian mendeklarasikan variabel, kalian bisa memanggilnya dengan menggunakan fungsi var() . Perhatikan sintaks berikut.
.button {
background-color: var(--primary-background);
color: var(--primary-text-color);
}
Cara Set Value CSS Variables Dalam React
Mengubah nilai atau value yang ada pada variabel CSS mungkin akan sedikit rumit karena React tidak menawarkan tools yang dapat berinteraksi langsung denga DOM tree.
Berikut adalah cara untuk mengatur variabel CSS dalam React:
import { useEffect } from 'react';
export default function Example() {
useEffect(() => {
document.documentElement.style.setProperty('--primary-background', `black`);
document.documentElement.style.setProperty('--primary-text-color', `white`);
}, [])
return <div style={{color: "var(--primary-text-color"}}>Hello World</div>};
Dapat kalian lihat, sintaks diatas memanfaatkan variabel global ‘document’ untuk masuk ke dalam DOM tree dan mengubah style properties. Pada sintaks di atas metode ‘setProperty’ membutuhkan dua argumen:
- Nama CSS custom property (CSS variabel)
- Value dari variabel tersebut
Cara Get Value CSS Variables Dalam React
Kedepannya, kalian mungkin perlu membaca nilai dari variabel CSS yang sudah ditetapkan dan disimpan di React. Dalam hal ini, kalian dapat menggunakan hook useState dan useEffect.
Berikut adalah contoh penerapannya:
import { useEffect, setState } from 'react';
export default function Example() {
const [color, setColor] = useState('black');
useEffect(() => {
const cssColor = document.documentElement.style.getPropertyValue('--primary-text-color');
setColor(cssColor);
}, [])
return <div style={{color: color}}>Hello World</div>};
Pada sintaks di atas, nilai dari variabel --primary-text-color diambil dan disimpan dalam konstanta cssColor . Pada baris berikutnya, status komponen diperbarui dengan menggunakan bantuan setColor yang dibuat oleh useState hook. Dengan menerapkan metode ini, variabel CSS dapat dengan mudah digunakan dalam komponen React.
Kesimpulan
Dalam dunia pengembangan web, mengurangi penulisan kode program yang repetitif adalah hal yang sangat penting. Oleh karena itu, penggunaan CSS Variables akan sangat membantu. CSS Variables, atau disebut juga CSS Custom Properties, memungkinkan pengembang untuk mendefinisikan dan menggunakan kembali nilai dalam stylesheet CSS. Hal ini membantu membuat kode lebih mudah dikelola dan diperbarui.
Dengan menggunakan CSS Variables, kalian dapat dengan mudah mengubah warna, ukuran, atau atribut gaya lainnya dengan hanya memodifikasi nilai variabel, tanpa perlu mengubah banyak bagian kode secara manual.
Dalam pengembangan web modern, khususnya dalam framework seperti React, penggunaan CSS Variables dapat sangat bermanfaat. Kalian dapat mengambil nilai variabel CSS dan menyimpannya dalam state React, yang memungkinkan kalian untuk membuat aplikasi web yang lebih dinamis dan responsif.
Pelajari pembahasan lainnya mengenai CSS dan framework React di web BuildWithAngga. Join Kelas Online CSS Website Design dan Kelas Online React JavaScript secara gratis bareng mentor expert!
Don’t forget to keep learning and see you at class!😉
