Long time I should have publish this, but better late than never, isn’t it?
Unfortunately, the event wasn’t recorded, so here are the slides of the talk. But I’ll explain a bit more some of the concept of CSS Variables afterwards.
I won’t go into detail of each slide, but don’t hesitate to ask me on Twitter if you have any question. You can even ask me to talk for your meetup or conference if you think this topic is interesting for your public.
CSS Variable: declaration and usage
So, first, how to use CSS Variables in your code?
- Declare your variable so they are available in a specific scope:
- Then use the function
var()to use the variable value as property value.
- The end.
Note that variables are scoped. Meaning that if you declare your variables within a specific
div for instance, the variable will be available only for this
div and all its children.
This is interesting because it allows you to create themable sections or contexts within your interface.
Why should I use CSS Variables?
Don’t feel the need to use it just because it’s trendy, use it if you need to make things vary here and there. For instance, it can be really handy for dark mode adjustments or media queries.
But, for a lesser need, you can also use it to vary styles while hovering or in active states of elements.
This code example is a bit too simple to find an interest into CSS Variable, but when you build complex component, you are happy to be able to set variables and vary those variables at the component level, without re-declaring all the selectors and states.
CSS Variables are live and JS-friendly
CSS Variables aren’t Sass or LESS variables, they are interpreted by the browser and live all the time. You can change it with JS if you need, or via usual class or states (
:valid, etc.) changing.
The JS part is quit short compared to the CSS linear-gradient declaration. For the JS Part we only set one variable depending on the cursor position.
Then we use this variable in CSS to make things dynamic and animated.
The double background declaration is for browser that doesn’t support CSS Vars. You can also use @support in some cases. Note that here the initial value is set directly in CSS at the beginning of the selector, scoped.
Another similar shot just to share the effect with you. The first item shows you how it works when Variables are supported, and the 2 others in case they are not.
CSS Variables specificity
There are some things you need to now before jumping into using it without caution.
- CSS Variable names are case sensitive:
--Buttonare different variables.
- You can’t “cycle” variables. So you can’t write
--value: calc(--value + 10em);
- You can’t build-up values. The value has to be a valid CSS value for the given usage. So you can’t write:
- You can use !important into Custom Properties values:
--value: 10px !important;(but don’t…)
- A blank character is a valid CSS Custom Properties value:
--value: ;is valid,
- You can have a fallback while using a variable:
color: var(--primary, #005533);
- A variable is a valid fallback:
color: var(--primary, var(--neutral, #005533));and yes, it can be infinite.
I hope this short transcript helped you a little bit. Don’t hesitate to contact me on Twitter if you need any advice.