DEV Community

hideckies
hideckies

Posted on • Originally published at blog.hdks.org

Consistent Frontend with CSS Variables

#css #webdev

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)