{"id":10,"date":"2026-03-06T14:36:57","date_gmt":"2026-03-06T14:36:57","guid":{"rendered":"https:\/\/halfyolanda.com\/blog\/?p=10"},"modified":"2026-03-06T15:30:11","modified_gmt":"2026-03-06T15:30:11","slug":"css-custom-properties","status":"publish","type":"post","link":"https:\/\/halfyolanda.com\/blog\/index.php\/2026\/03\/06\/css-custom-properties\/","title":{"rendered":"CSS: Custom Properties"},"content":{"rendered":"\n

What They Are and Why You Should Be Using Them<\/strong><\/p>\n\n\n\n

Ever found yourself searching through thousands of lines of CSS just to update a font colour you’ve changed your mind about? CSS Custom Properties were made for you. In this post, we’ll go through what they are, how they work, and when to use them.<\/p>\n\n\n\n

CSS Custom Properties were first introduced in 2012 and became fully supported across major browsers by 2017. They allow developers to define reusable values directly in their CSS \u2014 think of it as a shared bookshelf that your whole stylesheet can access. No build tools or preprocessors needed. Instead of searching through lines of CSS for a colour or spacing value, you define it once and update it in a single place. This keeps your stylesheets cleaner, consistent, and easier to maintain. Custom Properties are particularly useful when it comes to themes, media queries, and dynamic styling with JavaScript.<\/p>\n\n\n\n

How do we use CSS Custom Properties<\/strong><\/p>\n\n\n\n

The first step when it comes to CSS Custom Properties is to define your values. In common practice, it is best to define them under the <\/mark>:root<\/mark><\/code> <\/strong>selector at the top of your stylesheet. This allows your custom properties to be accessed globally throughout your CSS. To define a custom property, you use <\/mark>--<\/code> <\/mark><\/strong>followed by the name of your variable. Below is an example of how it would appear:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u00a0
After you’ve defined your custom properties, you can apply them to any CSS property by placing them inside var()<\/mark><\/strong><\/code>. That way, instead of updating the heading size in multiple places, you only need to update it once in the:root<\/mark><\/strong><\/code> selector \u2014 any element using that custom property, like h1<\/strong><\/code> or h2<\/strong><\/code><\/mark>, will automatically reflect the change. Custom Properties also allow developers to give their values meaningful, descriptive names, making the code easier to read and maintain.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Key Use Cases<\/strong><\/p>\n\n\n\n

    \n
  1. Theming<\/strong><\/li>\n<\/ol>\n\n\n\n
      <\/ol>\n\n\n\n

      One of the most popular uses of CSS Custom Properties is theming. Before Custom Properties, switching themes meant maintaining an entirely separate stylesheet and loading it in on demand, which was messy and hard to manage. Now, you just define your colours once and override them when needed. You would start by defining your custom properties for your default theme under:root<\/code>.<\/mark> <\/mark><\/strong>Then you would redefine those variables under[data-theme=\u2019dark\u2019]<\/code>.<\/mark> <\/mark><\/strong>That way all the elements that carry those custom properties will update automatically when the dark theme is active.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      To get this working, a small piece of JavaScript toggles the data-theme<\/mark><\/strong><\/code> attribute on your <html><\/mark><\/strong><\/code> tag between \"light\"<\/strong><\/code> <\/mark>and \"dark\"<\/mark><\/strong><\/code>. When it switches the browser will automatically re-read the custom properties and apply the changes. All the elements will pick up the new values instantly.<\/p>\n\n\n\n

      2. Responsive Design<\/strong><\/p>\n\n\n\n

      Another great use case for CSS Custom Properties is responsive design. I remember the first responsive design project I worked on and how tedious it was because I didn’t use CSS Custom Properties. Every time I changed a colour or size, I had to manually go through a stylesheet of nearly 900 lines and change every single affected instance. Custom Properties completely eliminate that problem. You just redefine the value once inside a media query and everything updates automatically.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      The values defined under:root<\/strong><\/code><\/code><\/strong> <\/mark>act as your default screen size. The media query then redefines those same properties with smaller or larger values that suit your site’s needs. Any element using var(--font-size)<\/mark><\/strong><\/code> or var(--spacing)<\/strong><\/code><\/strong><\/code> <\/mark>will automatically adjust accordingly, meaning you no longer have to scan through hundreds of lines to make changes.<\/p>\n\n\n\n

      3. JavaScript Integration<\/strong><\/p>\n\n\n\n

      The great thing about CSS Custom Properties is that they can also be connected to your JavaScript. This is actually how the dark and light theme switching would work. You would add a button to your site that the user clicks on. When the user clicks that button it switches the <\/mark><\/strong><\/code><\/code><\/strong><\/code>data-theme<\/strong><\/code><\/code><\/strong><\/code> <\/mark>attribute on the <html><\/strong><\/code><\/code><\/strong><\/code> <\/mark><\/strong>tag and the browser will update as needed.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      This is just one example of how JavaScript and CSS Custom Properties can work together. You can also use JavaScript to update any custom property in real time. Things like changing colours based on a slider, adjusting font sizes based on user preferences, or even driving animations based on mouse movement.<\/p>\n\n\n\n

      A few things to keep in mind<\/strong><\/p>\n\n\n\n