DEV Community

hideckies
hideckies

Posted on • Originally published at blog.hdks.org

1

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more