Skip to content
Web Dev

CSS Variables

Which CSS variables should you use for each project?

:root {


/* Color */
    --color-neutral-900: #212934;
    --color-neutral-700: #4D545D;
    --color-neutral-500: #8E9399;
    --color-neutral-300: #CDCFD2;
    --color-neutral-100: #F8F9FA;


    --color-accent-900: #224361;
    --color-accent-500: #2368A2;
    --color-accent-100: #95B6D1;


    --color-accent-red-900: #623238;
    --color-accent-red-500: #B13C3B;
    --color-accent-red-100: #DBABAC;


    /* Consider defining on what a color is used on,
    like "--color-heading: var(--color-neutral-100)"*/




/* Typography */
    --font-family: ui-sans-serif, "Helvetica Neue", Arial;
    --font-mono: ui-monospace, Menlo, monospace;


    --font-size-small: 0.875rem;
    --font-size-base: 16px; /* or 18px*/
    --font-size-large: 1.25rem;




    --text-size-6xl: 4rem;
    --text-size-5xl: 2.75rem; /* desktop h1*/
    --text-size-4xl: 2.25rem; /* mobile h1; desktop h2 */
    --text-size-3xl: 1.75rem; /* mobile h2 */
    --text-size-2xl: 1.5rem;
    --text-size-xl: 1.25rem;


    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;


    --font-line-height: 1.5;
    --font-line-height-heading: 1.2;


/* Spacing */
    --space-xss: 0.375rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1.25rem;
    --space-l: 2rem;
    --space-xl: 3.25rem;
    --space-2xl: 5.25rem;
    --space-3xl: 8.5rem;


    --flow-space: 1em;


/* Border */
    --border-radius-s: 4px;
    --border-radius-m: 8px;
    --border-radius-l: 16px;


    --border-width-s: 1px;
    --border-width-m: 2px;
    --border-width-l: 4px;


/* Shadows */
    --text-shadow-s: 0 2px 4px rgba(0, 0, 0, 0.1);
    --text-shadow-m: 0 4px 4px rgba(0, 0, 0, 0.15);
    --text-shadow-l: 0 6px 12px rgba(0, 0, 0, 0.2);


    --box-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
    --box-shadow-m: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    --box-shadow-l: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);


/* Transitions */
    --transition-normal: 0.2s ease;


    /* consider adding animation var if needed */


/* Breakpoints */
    --breakpoint-m: 48rem; /* If using PostCSS (Or SASS or SCSS) */


/* Other */
    --navbar-height: 3.5rem;
    --footer-height: 8rem;
    --side-gap-padding: var(--space-s);




    --base-layout-max-width: 84rem;
    --main-content-max-width: 45rem;


    --opacity-s: 0.3;
    --opacity-m: 0.5;
    --opacity-l: 0.7;
}

For example we can use these variables to style our section heading elements or the overall body like this:

:root {
    accent-color: var(--color-accent-500);
}


body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--font-line-height);
    background-color: var(--color-neutral-900);
    color: var(--color-neutral-100);
}


h1 {font-size: var(--text-size-4xl);}
h2 {font-size: var(--text-size-3xl);}
h3 {font-size: var(--text-size-2xl);}
h4 {font-size: var(--text-size-xl);}


@media (min-width: 48rem) {
    h1 {font-size: var(--text-size-5xl);}
    h2 {font-size: var(--text-size-4xl);}
    h3 {font-size: var(--text-size-3xl);}
    h4 {font-size: var(--text-size-2xl);}
}

Color variables

Select colors as described on this page. Define them to reuse them when needed, this way we do not have slight variants in color when do not want that and it is easier to make the overall design feel coherent. And if needed we can change the colors at one place, this is especially usuful when we want to have different color themes such as light and dark mode.

Typography variables

For the typography we define which font to use, the basics of its styling and which font sizes and weight we are going to use.

If you need to squeeze out some more loading speed you can optimize your font.

Spacing variables

Define spacing sizes. We want to keep reusing these values. Elements of the same group will be placed closer together, while items of different groups have larger spacing. By defining values we can achieve a design that looks much cleaner and does not look for feel arbitrary.
This 10 minute Youtube video on rules for good spacing goes deeper into how to apply these correctly.

Border variables

Define borders for reuse. Consider defining specific colors in addition to radius and width.

Shadow variables

Shadows for text-shadow and box-shadow.

Other variables

Consider adding variables for animations when you use them at multiple places on your website.

I also like to define the minimum height of my header and footer. This makes it easier to use properties like scroll-padding, which we can use to make section header elements (<h1>, <h2>..) show up below our header navigation after clicking an anchor (<a>) element instead of behind it.

Multi color themes

Now the snippet only needs a few adjustments to also allow us to swap between different color profiles like light and dark mode.

(wip)

Breakpoint variables via PostCSS plugin

One great way to enhance CSS without changing anything about how you write CSS is by using the PostCSS plugin. I use its postcss-preset-env plugin in every project of mine. This package includes the custom-media-queries plugin.

With this plugin we can define a breakpoint and use it in our media queries:

@custom-media --viewport-m (min-width: 48rem);


/* Which allows us to:*/
@media (--viewport-m) { }
Sources & References