2025-03-20
5201
#css
Idorenyin Obong
14833
Mar 20, 2025 â‹… 18 min read

How to use CSS variables like a pro

Idorenyin Obong Software engineer with a flair for writing.

Recent posts:

Build TypeScript App Vite

How to build a React + TypeScript app with Vite

We explore the benefits of building an app with React, TypeScript, and Vite, and compare its performance to the same app built with CRA.

Clara Ekekenta
May 28, 2025 â‹… 7 min read

How to use Claude to build a web app

Learn how to build a weather app using Claude, from setting up infrastructure to creating a functional UI that displays city-based forecasts.

Andrew Evans
May 28, 2025 â‹… 8 min read
Enhancing LLMs With Function Calling And The OpenAI API

Enhancing LLMs with function calling and the OpenAI API

Implement a scheduling assistant using the OpenAI API and function calling, no Model Context Procedure (MCP) required.

Kapeel Kokane
May 28, 2025 â‹… 11 min read
6 CSS Frameworks Every Developer Should Use In 2025

Top 6 CSS frameworks every frontend developer should know in 2025

Tight deadline? Bloated CSS options? This guide breaks down six modern CSS frameworks, from Beer CSS to CodeStitch, that help you build fast, beautiful UIs in 2025.

Murat YĂĽksel
May 27, 2025 â‹… 10 min read
View all posts

3 Replies to "How to use CSS variables like a pro"

  1. I strangely couldn’t retrieve the value from documentElement via getPropertyValue, as it was not set on that element. Setting the value via javascript to black works fine, and then retrieval works and comes back as black. (I had one variable definition in css under :root in header style definitions – red, and one value set on the html element itself via chrome devtools – black)
    Instead using getComputedStyle worked okay as it supports the pseudo selector as second argument and I was able to retrieve the original css value of red, or any overloaded value as appropriate.

    window.getComputedStyle(window.document.documentElement,”:root”).getPropertyValue(‘–joy-colour’)

Leave a Reply