Consistent Frontend with CSS Variables

2022-01-24
#Frontend #CSS

When I create websites, I often set global variables in CSS file.

For example, 

1
2
3
4
5
6
7
8
9
10
11
/* style.css */
:root {
    /* Colors */
    --color-black: #222;
    --color-red: #e12;
    --color-white: #fff;

    /* Fonts */
    --font-family-roboto: 'Roboto', sans-serif;
    --font-family-opensans: 'Open Sans', sans-serif;
}

If you set variables in the :root, you can use these values anytime and anywhere in your frontend project.

For example, 

1
2
3
4
5
6
7
8
9
.wrapper {
    font-family: var(--font-family-roboto);
    color: var(--color-black);
}

a {
    font-family: var(--font-family-opensans);
    color: var(--color-red);
}

This makes your website theme more consistent and, above all, even easier to code.