net

PROJECTS
CSS

SUGGESTED READING

RESOURCES

There are many great resources on this topic; here are a few

that will help you get a better handle on custom properties.

CSS Tricks

https://css-tricks.com/tag/custom-properties/

Features many articles with a lot of really interesting details.

CSS Variables: Why Should You Care?

https://developers.google.com/web/updates/2016/02/css-

variables-why-should-you-care

More of a technical perspective from Google.

CodePen

https://codepen.io/krisztianpuska/pen/gewvmZ

The CodePen for this article.

These are the basics but you can do so much more.

Another great example is changing layout based on

viewport size.

:root {

--color-red: #fc4752;

--flex-layout: row;

}

@media (max-width: 640px) {

:root {

--flex-layout: column;

}

}

.site-navigation {

display: flex;

flex-direction: var(--flex-layout, row);

background-color: var(--color-red, red);

}

.site-footer {

color: var(--color-red);

}

Under 640px the media query triggers, changing

the flex direction to column on site-navigation

class, making its content vertical (column) instead

of the default horizontal (row). In this example,

because of the default variable given to site-

navigation, you don’t even need the initial :root

definition of --flex-layout; instead it will actually go

straight to row.

This is cool but it’s not all fun and games just

yet. For instance, since the media query is not

an element, the breakpoint value cannot come

from a custom property. Although CSS Working

Group has a draft of using env() for queries, vendor

implementation and proper support is probably years

away from where things are today.

That’s okay. We will stick to what we have now.

One more advanced use case for a custom property

is switching themes. You can define a base theme,

build your website around it and just switch it out,

with the browser doing the heavy lifting. And it’s not

even that heavy.

ģ\rx#fdq#ghĽqh#d#edvh#

theme, build your

website around it and

just switch it out”