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.
Top comments (0)