--- title: CSS Variables 101 | daily.dev description: CSS Variables 101 CSS variables (AKA custom properties) have been supported in web browsers for almost four years. With CSS variables, this can be made much... canonical: https://daily.dev/posts/css-variables-101-taililocv twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS Variables 101 | daily.dev og:description: CSS Variables 101 CSS variables (AKA custom properties) have been supported in web browsers for almost four years. With CSS variables, this can be made much... og:url: https://daily.dev/posts/css-variables-101-taililocv og:image: https://api.daily.dev/og/posts/TaILilOcv.png og:image:alt: CSS Variables 101 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # CSS Variables 101 **[Community Picks](https://daily.dev/sources/community)** · 13 min read · 240 upvotes · 12 comments ## Summary CSS Variables 101 CSS variables (AKA custom properties) have been supported in web browsers for almost four years. With CSS variables, this can be made much better like so. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@kyoukhana** · 2 upvotes > Great article what I want to know what program was used to create the visuals :) **@misterteick** · 2 upvotes > Nice. > > > > I found it usfull to do an absolute basic concepts course on a new technology I learn **@fabooy961** · 1 upvotes > the real tl;dr > > ```css > :root { // refers to so you can use it everywhere > --my-variable-name: #fff; > } > > .class { > color: var(--my-variable-name); // will be #fff > } > > .my-other-class { > --my-variable-name: #eee; // overrides stuff > color: var(--my-variable-name); // will be #eee, what a surprise! > } > ``` > > imao it doesn't make sense to declare css vars in blocks and override them. But that's a subjective opinion of my retarded me ;) **@oubaidaakilan** · 1 upvotes > Thx a lot man for your effort and time 🌹🌹🌹 > I like it so much , it's very useful and easy to read. **@master\_aless** · 0 upvotes > If we think of in terms of **Scalability**, variables in CSS it's one of our best ways to achieve it. > > It's still used the *Find and replace* method, but... Why not changing just one thing instead of plenty of them? ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/css-variables-101-taililocv) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"CSS Variables 101","url":"https://daily.dev/posts/css-variables-101-taililocv","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-variables-101-taililocv"},"datePublished":"2023-09-20T08:26:30.592Z","dateModified":"2023-12-07T12:02:45.284Z","description":"CSS Variables 101 CSS variables (AKA custom properties) have been supported in web browsers for almost four years. With CSS variables, this can be made much...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2212d456c60837574421b33dc99f601c?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2212d456c60837574421b33dc99f601c?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":12,"discussionUrl":"https://daily.dev/posts/css-variables-101-taililocv","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":240},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":12}],"keywords":"css","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"CSS Variables 101"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/css-variables-101-taililocv","comment":[{"@type":"Comment","text":"Great article what I want to know what program was used to create the visuals :)","datePublished":"2023-09-21T12:11:58.208Z","url":"https://daily.dev/posts/TaILilOcv#c-xOGCIvZOE","author":{"@type":"Person","name":"Kevin","url":"https://daily.dev/kyoukhana","image":"https://avatars2.githubusercontent.com/u/756849?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Nice.\nI found it usfull to do an absolute basic concepts course on a new technology I learn","datePublished":"2023-09-21T08:41:25.008Z","url":"https://daily.dev/posts/TaILilOcv#c-fW67THM2O","author":{"@type":"Person","name":"Brian Anderson","url":"https://daily.dev/misterteick","image":"https://media.daily.dev/image/upload/s--Ut3XX3zE--/f_auto,q_auto/v1695123841/avatars/avatar_mEyy1KqPu3GorT2Omw7PI"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"the real tl;dr\n:root { // refers to <html> so you can use it everywhere\n --my-variable-name: #fff;\n}\n\n.class {\n color: var(--my-variable-name); // will be #fff\n}\n\n.my-other-class {\n --my-variable-name: #eee; // overrides stuff\n color: var(--my-variable-name); // will be #eee, what a surprise!\n}\n\nimao it doesn’t make sense to declare css vars in blocks and override them. But that’s a subjective opinion of my retarded me ;)","datePublished":"2023-09-24T15:28:28.093Z","dateModified":"2023-09-24T15:29:29.974Z","url":"https://daily.dev/posts/TaILilOcv#c-ozlvuRJvz","author":{"@type":"Person","name":"Le Fä De Le Lö","url":"https://daily.dev/fabooy961","image":"https://media.daily.dev/image/upload/v1677218265/avatars/avatar_H6lLM2y9S4Yf8VCWicpd8.jpg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Thx a lot man for your effort and time 🌹🌹🌹\nI like it so much , it’s very useful and easy to read.","datePublished":"2023-09-22T04:25:00.523Z","url":"https://daily.dev/posts/TaILilOcv#c-kNC9mETBk","author":{"@type":"Person","name":"Oubaida Akilan","url":"https://daily.dev/oubaidaakilan","image":"https://avatars.githubusercontent.com/u/79963515?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"If we think of in terms of Scalability, variables in CSS it’s one of our best ways to achieve it.\nIt’s still used the Find and replace method, but… Why not changing just one thing instead of plenty of them?","datePublished":"2023-12-08T16:54:49.818Z","url":"https://daily.dev/posts/TaILilOcv#c-fkJebIE56","author":{"@type":"Person","name":"Jhon Alessandro Leon Valero","url":"https://daily.dev/master_aless","image":"https://media.daily.dev/image/upload/s--bybOiVRn--/f_auto,q_auto/v1/avatars/avatar_zddE8a745BVM3Kn4wxVFI"}}]} ```