Upgrade your CSS variables by registring them using the @property

CSSTip serves as a treasure trove of knowledge for frontend developers striving to master the art of Cascading Style Sheets (CSS). Through concise tips, detailed tutorials, and creative demonstrations, readers embark on a journey to harness the full potential of CSS for web design and development. From responsive layouts to  animations, CSSTip empowers developers to create visually stunning and user-friendly web experiences.

CSS Tip

Stop defining your CSS variables inside :root and start using @property to create typed CSS variables. This approach enhances debugging, provides implicit data validation, allows animations where applicable, and makes variables available globally with default values.

Typed CSS variables using @property

If it was possible to embed only in source map for debugging and minifying for final .min.css, I’d be using it, but large sites have lot of variables leading to larger CSS.

I disagree. In the used example screenshot, there is nothing wrong. If it is not working, the devtools will tell you. It’s not telling you WHY it’s invalid. But this is not important for using CSS at all.
At the expert level in working on, using @property is the way to go. But there is absolutely nothing wrong define variables in :root. For beginners, @property is adding a level of complexity, which is only needed in large projects.

I think that both examples are hard to read. Why not using the variables from less or sass?

I like the concept, but ugh all of the extra typing makes my wrists hurt. I feel like I’ve gotten by for a long time without the need to debug css, though I bet now that I said it I’ll run into something 🤪.
Maybe on large scale enterprise projects this would be very convenient, especially for distributed teams.