Consistent Frontend with CSS Variables

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

For example,

/* 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,

.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.

Blog

Consistent Frontend with CSS Variables

hideckies

Join Our Newsletter. No Spam, Only the good stuff.

Related