--- title: What are CSS Custom Properties description: Learn how CSS Custom Properties, also known as CSS Variables, can streamline code maintenance and enhance readability in web projects. image: https://blog.avenuecode.com/hubfs/Generated%20images/Um%20computador%20com%20v%C3%A1rios%20c%C3%B3digos%20de%20programador%20na%20linguagem%20css.jpeg --- [AvenueCode.com](https://avenuecode.com) [News](https://avenuecode.com/news) [Contact](https://avenuecode.com/contact) [![Avenue Code Snippets Logo](https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/AC-Snippets---Black.png)](https://blog.avenuecode.com/?hsLang=en-us) *menu* - Technology [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us) [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) - [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) - [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) - [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) - [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) - [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) - [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) - [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) - [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) # [What are CSS Custom Properties](https://blog.avenuecode.com/what-are-css-custom-properties) - [Tweet](https://twitter.com/share) *perm\_identity* [Jose Nascimento](https://blog.avenuecode.com/what-are-css-custom-properties/author/jose-nascimento?hsLang=en-us) *schedule* 4/3/24 3:00 PM CSS Custom Properties, also referred to as CSS Variables, are designed to reuse properties throughout a project. This enhances code maintenance and readability. ## **The Problem** In large systems and websites, we often use the value for a certain CSS property repeatedly, which ends up being repeated and spread across several CSS files. Considering the need to change a certain color that is being used in several elements of a site or application, it would be necessary to search for all the files where the color was defined and make the change. Once CSS Variables are used, it would only be necessary to define the value in one place and make the reference of the property where it is used. Thus, when you need to change the value of the property, you will only need to change it in one place, which, in turn, will be updated in all places that reference it. ## **Benefits of Custom Properties** Custom Properties have several benefits. One of these is the "Don't Repeat Yourself" (DRY) software development principle, which encourages reducing repeated information. ![1-Apr-03-2024-05-33-18-2488-PM](https://blog.avenuecode.com/hs-fs/hubfs/1-Apr-03-2024-05-33-18-2488-PM.png?width=960&height=774&name=1-Apr-03-2024-05-33-18-2488-PM.png) In the example above, the "primary" color variable was defined as "#3b92f6". This allowed us to use the color variable in both ".button" and ".input", without repeating the value in each. If there's a need to change the "primary" color, you would only need to alter the variable value in the ":root". ## **Declaration and Use of CSS Variables** Still using the example above, we notice the use of the pseudo-class ":root", which represents the root of the document, equivalent to the "html" tag. ![2-Apr-03-2024-05-33-50-9313-PM](https://blog.avenuecode.com/hs-fs/hubfs/2-Apr-03-2024-05-33-50-9313-PM.png?width=960&height=294&name=2-Apr-03-2024-05-33-50-9313-PM.png)To create a variable, use the prefix "--". ![3-Apr-03-2024-05-35-00-9202-PM](https://blog.avenuecode.com/hs-fs/hubfs/3-Apr-03-2024-05-35-00-9202-PM.png?width=960&height=198&name=3-Apr-03-2024-05-35-00-9202-PM.png)With this approach, you can use the defined variable anywhere. It can be accessed using the "var()" function: ![4-Apr-03-2024-05-35-29-3699-PM](https://blog.avenuecode.com/hs-fs/hubfs/4-Apr-03-2024-05-35-29-3699-PM.png?width=960&height=342&name=4-Apr-03-2024-05-35-29-3699-PM.png) ## **Usage of CSS Variables** CSS Variables can be used for more than just defining colors. They can also be applied to define spaces, borders, font sizes, and many other elements that you may want to reuse. ![5-Apr-03-2024-05-36-09-4495-PM](https://blog.avenuecode.com/hs-fs/hubfs/5-Apr-03-2024-05-36-09-4495-PM.png?width=1130&height=726&name=5-Apr-03-2024-05-36-09-4495-PM.png) ## **Application in Design System** CSS Variables are particularly beneficial in environments with multiple teams using the same visual structure, such as a Design System. Their use can enhance the application of [tokens](https://brasil.uxdesign.cc/o-que-s%C3%A3o-design-tokens-cd408431727d). You can create a repository containing all the properties and tokens, then import them into your project. This approach ensures standardized use of properties across different projects, eliminating the need to create each property individually. ![7-Apr-03-2024-05-37-23-7656-PM](https://blog.avenuecode.com/hs-fs/hubfs/7-Apr-03-2024-05-37-23-7656-PM.png?width=618&height=307&name=7-Apr-03-2024-05-37-23-7656-PM.png) ## **When not to use CSS Variables** CSS variables are not required when dealing with specific values. These might include the height and width of an icon, values for the "display" or "cursor" properties, and others. Therefore, it's important to analyze each property in the CSS file to understand whether reuse is necessary. ![6-Apr-03-2024-05-37-52-9783-PM](https://blog.avenuecode.com/hs-fs/hubfs/6-Apr-03-2024-05-37-52-9783-PM.png?width=960&height=534&name=6-Apr-03-2024-05-37-52-9783-PM.png) ## **CSS Variables vs. SASS** Unlike SASS/SCSS, there's no need to compile the code because it's pure CSS. Nevertheless, you can use SASS resources such as functions, mixins, and nested rules alongside CSS Variables. ## **How to Enhance the Use of CSS Variables** - [NPM package](https://www.npmjs.com/) - You can create an NPM package with the variables and import it into various projects. - [Tailwind CSS](https://tailwindcss.com/) - CSS Variables can be used by importing them into tailwind.config.\[js/ts\]. - [Style-dictionary](https://amzn.github.io/style-dictionary/) - This allows you to create properties in JSON format and export them to different platforms and languages. Have you been adopting CSS Variables in your projects? # References [https://developer.mozilla.org/en-US/docs/Web/CSS/Using\_CSS\_custom\_properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) [https://desenvolvimentoparaweb.com/css/variaveis-css-guia-pratico/](https://desenvolvimentoparaweb.com/css/variaveis-css-guia-pratico/) [https://desenvolvimentoparaweb.com/css/variaveis-css-valores-possiveis/](https://desenvolvimentoparaweb.com/css/variaveis-css-valores-possiveis/) [https://brasil.uxdesign.cc/o-que-são-design-tokens-cd408431727d](https://brasil.uxdesign.cc/o-que-s%C3%A3o-design-tokens-cd408431727d) --- ### Author # Jose Nascimento --- ### Related Posts ### How to Build Your Own Facial Recognition Web App [READ MORE](https://blog.avenuecode.com/how-to-build-your-own-facial-recognition-web-app?hsLang=en-us) ### 4 Ways to Make Your Angular App Sustainable and Scalable [READ MORE](https://blog.avenuecode.com/8-design-tips-to-make-your-angular-app-sustainable-and-scalable?hsLang=en-us) ### How to Build a Custom Component in VueJS [READ MORE](https://blog.avenuecode.com/how-to-build-a-custom-component-in-vuejs?hsLang=en-us) ### Leave a Comment! ### Avenue Code Social [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Blog/facebook.png?t=1486470796564)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Blog/twitter.png?t=1486470796842)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Blog/linkedin.png?t=1486470796556)](https://www.linkedin.com/company/avenuecode/) ### Newsletter Want to stay on top of all tips and news from Avenue Code? ### Popular Snippets ![Avenue Code-primary versions_logo white avenue code endorsement 2](https://blog.avenuecode.com/hs-fs/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_logo%20white%20avenue%20code%20endorsement%202.png?width=1180&name=Avenue%20Code-primary%20versions_logo%20white%20avenue%20code%20endorsement%202.png "Avenue Code-primary versions_logo white avenue code endorsement 2") ### About Us - [Who We Are](https://www.avenuecode.com/who-we-are) - [What We Do](https://www.avenuecode.com/what-we-do) - [Portfolio](https://www.avenuecode.com/portfolio) - [Partners](https://www.avenuecode.com/partners) - [News](https://www.avenuecode.com/news) - [Events](https://www.avenuecode.com/events) - [Blog](https://blog.avenuecode.com/) - [Contact](https://www.avenuecode.com/contact) ### Our Offices San Francisco [+1 415 766 4178](tel:+553125161448) [ac.inquiries@avenuecode.com](mailto:brazil.info@avenuecode.com) Belo Horizonte [+55 31 2516 1448](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) São Paulo [+55 11 3205 3232](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) ### We're Hiring! - [Belo Horizonte](https://www.avenuecode.com/who-we-are) - [New York](https://www.avenuecode.com/what-we-do) - [San Francisco](https://www.avenuecode.com/portfolio) - [São Paulo](https://www.avenuecode.com/partners) --- ©2015 - 2017 Avenue Code [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Icons/facebook-2.png)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Icons/twitter-2.png)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Icons/linkedin-2.png)](https://www.linkedin.com/company/avenue-code) [![Glassdoor Icon](https://blog.avenuecode.com/hubfs/Images/Icons/glassdoor-icon-1.png)](https://www.glassdoor.com/Overview/Working-at-Avenue-Code-EI_IE456173.11,22.htm) [![YouTube Icon](https://blog.avenuecode.com/hubfs/Images/Icons/youtube-2.png)](https://www.youtube.com/user/AvenueCodePlay) Please enable JavaScript to view the [comments powered by Disqus.](http://disqus.com/?ref_noscript) © 2026 Avenue Code ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Jose Nascimento", "url" : "https://blog.avenuecode.com/author/jose-nascimento" }, "dateModified" : "2024-04-03T18:00:00.459Z", "datePublished" : "2024-04-03T18:00:00.000Z", "headline" : "What are CSS Custom Properties", "image" : [ "https://blog.avenuecode.com/hubfs/Generated%20images/Um%20computador%20com%20v%C3%A1rios%20c%C3%B3digos%20de%20programador%20na%20linguagem%20css.jpeg" ], "mainEntityOfPage" : { "@id" : "https://blog.avenuecode.com/what-are-css-custom-properties", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_LOGO%20HORIZONTAL%20group%201-7.png" }, "name" : "Avenue Code" } } ```