Design Community Member Promotes CSS Variables

In a large online design community, a person shared a link to an article about practical use cases for CSS variables. When the author of the article first started to use them, they weren't afraid of the potential. When CSS variables are used the right way, it doesn't take as long or as much effort to achieve the desired result. The author recommends that people who are new to CSS read the article and follow along with their coding examples.

They said that the problem of a lack of knowledge about CSS variables means that a lot of people aren't taking full advantage of their benefits. They used an example of CSS variables for color. They said that it is like getting a powerful Apple M1 MacBook to browse the internet, even though the person has a 9-year-old Windows PC that is still running fine. What is the point of getting a top-of-the-line computer at three times the cost to do the same thing if you aren't going to use it to its full potential? That is how the author feels about CSS variables. They argue that people shouldn't just use them to store colors.

The author went on to give some examples of coding in CSS and other types of coding, such as HTML. In some scenarios, the site designer would have to adjust the longhand version of a property. A padding property is different from one variant of a component to another. Rather than rewriting all of the longhand again, the site owner could use a CSS variable for the element that will change. It will be overridden in the CSS class variation.

Backgrounds is another area where CSS variables outshine HTML. The author of the blog gave another example using background designs and how one could code for it in CSS and in HTML. The other examples provided by the author for the simplicity of coding in CSS compared to HTML include margins, background position, gradients, clip paths and check boxes. In essence, all of the things that are part of the user interface should use CSS. For more information click here https://ishadeed.com/article/practical-css-variables/.