I’ve been enjoying round with CSS variables (or customized properties) rather a lot lately and thought I’d share a couple of ideas as I develop a sensible technique for integrating them into my workflow.
Kinds of variables
When working with CSS Variables typically discover it helps to think about them as two differing kinds:
Major variables
These are the variable that you just may wish to replace in your CSS – in numerous selectors, inside media queries or when focusing on with :hover or :focus, for instance, or change with JavaScript. They typically comprise a single worth:
:root {
--wrapper: 900px;
--gutter: 10px;
}
Secondary variables
These are variables which are calculated from different variables. For instance, on this demo on facet ratio grid cells the --rowHeight variable is calculated from a number of main variables. It’s utilized to a property however by no means up to date manually – solely recalculated on account of updating the first variables.
It may be helpful to prefix secondary variables, like on this instance, so that you just and different folks working together with your code know that they shouldn’t be modified manually:
:root {
--wrapper: 900px;
--gutter: 10px;
/*
the s- prefix denotes a secondary variable
*/
--s-rh: calc((var(--wrapper) - (3 * var(--gutter))) / 4);
}
The one exception would after all be if it is advisable change how the worth is calculated – however theoretically as soon as set it needs to be everlasting. This might assist discourage builders who’re unfamiliar with the code from tinkering with it except needed.
Scoping
In a lot of my demos I’m declaring the variables in :root, which represents the <html> factor:
:root {
---bgColor: purple;
}
Nevertheless, this isn’t strictly needed and, in truth, isn’t actually good apply both. Lots of the causes for avoiding setting world variables in Javascript additionally apply to CSS. When you then needed to make use of a variable for background-color known as --bgColor in numerous parts you would run into all types of issues with scoping. It’s a greater concept to declare the variables in a selector, e.g. in case you’re working in parts:
.my-component {
---bgColor: purple;
}
.some-other-component {
---bgColor: blue;
}
Within the snippet above, --bgColor is scoped to every part, so you need to use a variable with the identical title with out worry of it affecting something exterior of that part.
Setting defaults
With CSS Variables you may set a fallback worth (or a number of values). This implies in some conditions you solely have to declare your variables on the level they should change. On this demo the variable --bgColor for the field is barely declared after the breakpoint – up till that time it takes on the default worth:
See the Pen CSS Variable default values by Michelle Barker (@michellebarker) on CodePen.
On this second instance you may see that the h1 and p selectors have completely different default values for his or her colour property, however each tackle the variable when hovered:
See the Pen CSS Variable with defaults by Michelle Barker (@michellebarker) on CodePen.
Utilizing CSS Variables with preprocessor variables
One of many drawbacks of CSS Variables is that they don’t work in media queries or selector names – e.g. :nth-child(var(--n)) wouldn’t work. So it’s seemingly you’re nonetheless going to wish to use preprocessor variables to a point.
I’d warning towards mixing the 2 except you totally perceive their completely different traits. Sass variables are compiled earlier than your code hits the browser, whereas CSS variables don’t tackle their computed worth till they hit the browser. That implies that within the instance beneath the width worth for .box1 (utilizing Sass variables) will work, however .box2 will throw an error as a result of the worth for --halfWidth is handed to the browser as a string:
$width: 600px;
$halfWidth: $width / 2;
:root {
--halfWidth: $width / 2;
}
.box1 {
width: $halfWidth;
}
.box2 {
width: var(--halfWidth); // this isn’t legitimate
}
You’ll be able to, nevertheless, use calc(), as in earlier examples. See the outcome within the demo right here:
See the Pen Preprocessor variable with CSS Variables by Michelle Barker (@michellebarker) on CodePen.
When you examine the factor in Chrome and go to the Computed Kinds tab you may see that the width worth for .box2 is just not computed. At Mud we use a whole lot of Sass capabilities, for instance to calculate rems from pixels for sizing. I discovered this was a problem after I tried to move a Sass operate right into a CSS variable, e.g. --width: rem(600px). There are PostCSS plugins that may convert pixels to rems and obtain the specified outcome, however I’d have to experiment a bit extra with these earlier than I really feel assured recommending them to be used with CSS Variables.
However, there are some eventualities the place utilizing preprocessor variables in the identical block of code as CSS Variables is smart, akin to in media queries, as talked about beforehand.
On this demo I’m utilizing Sass variables for the fallback values within the CSS variable, in addition to the media question to offer a useful visible breakpoint helper:
See the Pen Visualising breakpoints with CSS Variables by Michelle Barker (@michellebarker) on CodePen.
