DEV Community


Posted on • Originally published at


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)

12 Rarely Used Javascript APIs You Need

Practical examples of some unique Javascript APIs that beautifully demonstrate a practical use-case.