# Using CSS Variables

In this article, we will dive deeper into CSS variables (or custom CSS properties), which can be quite useful in reducing repetition in CSS code. 

## How to declare global CSS variables
Let's take a look at an example
```
:root{
     --main-background-color: #222831;
}
body{
   background-color: var(--main-background-color);
}
```
Declaring a custom property is done using a custom property name, ```main-background-color```, which always begins with a double hyphen ```--```, and a property value that is a valid CSS value, which for this case is a hex color code. It is best practice to define custom properties or variables on the ```root``` pseudo-class, so that it can be easily applied globally across the HTML document. The value can then be put to use using the ```var()``` function as shown above.

It is also worth noting that custom property names are **case sensitive**, meaning that ```text-color``` and ```Text-Color``` are treated as separate custom properties.

## How to declare local CSS variables
Just as we have seen that CSS variables can be declared globally by defining them in the ```root``` pseudo-class, CSS variables can also be declared locally, which means that the variables will be limited to the scope of the element as such: 
```
div{
    --div-color: #9fc131;
}
```
In the case as shown above, the variable having been declared locally, can be used by its children as shown below:
```
div p{
    color: var(--div-color);
    border: 1px solid var(--div-color);
}
```
## Accesssing CSS variables using JavaScript

CSS variables can be accessed using JavaScript, which can prove to be a powerful tool for better user interactions. For example:
```
:root{
     --main-background-color: #222831;
     --text-color: #ffffff;
}
body{
   background-color: var(--main-background-color);
}
```

To grab the CSS variables into JavaScript, the code is as shown below:

```
const root = document.querySelector(':root');
const rootStyles = getComputedStyle(root);
const mainBackgroundColor = rootStyles.getPropertyValue('--main-background-color');
```
The ```getComputedStyle()``` method returns an object which contains the values of all CSS properties of an element. The ```getPropertyValue``` method  returns a  [DOMString ](https://developer.mozilla.org/en-US/docs/Web/API/DOMString) containing the value of a specified CSS property, which in this case is ```--main-background-color```.

With this, we can update the CSS variables using  [setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty)  as such:
```
root.style.setProperty('--main-background-color', '#9fc131');
```
## Conclusion

Using CSS variables can be a powerful method to reduce repetition of code and increase readability, which can be a big win for front-end developers. Well at least, the struggle of manually updating values, for example, color codes, can be easily fixed using CSS variables.