🔵 CSS Variables Overview 🔵
CSS Variables otherwise known as custom properties or cascading variables are a great way to reuse the same values across multiple elements & properties.
Let's take a closer look at them. 🧵
Let me know, did you learn something new? 💬
1️⃣ What are CSS Variables?
CSS Variables allow us to define a value in one central location and use it multiple times in any child element or property.
❓ Why this matters?
👉 Because it means we only have to change one line of code to change the value everywhere.
2️⃣ Basic Setup
CSS Vars can be defined in any element on the page and its children will be able to access them.
But, a more common method is to define all common vars like colours and font sizes in the :root selector. This makes it available on the entire website.
❗ Case Sensitivity
Something to watch out for is case sensitivity if we define 2 variables:
They will be treated as different vars.
⭐ To avoid this set up a naming convention and follow it for all your variables. e.g. all lowercase
CSS Vars do inherit. For example, if we don't set a var on an element, it will inherit the value used by its parent.
4️⃣ Fallback Values
You can specify a fallback value to be used as well should your CSS var not be defined.
❗ Fallback values aren't used to fix browser compatibility, if the browser does not support CSS vars it will not help. It's just for if the var isn't defined.
5️⃣ Invalid Values
If the browser encounters invalid values. E.g.
text-size: 8px; color: var(text-size);
1: Check if the property is inheritable. If the parent doesn't have that property, go to 2. 2: Set the value to its default initial value.
📚 Read More / Sources
The MDN Doc on CSS Variables is a great help and was the source of this thread.
Check it out here:
🔗 Links in this Tweet:
Did you enjoy this thread or find it helpful? If so I would greatly appreciate it if you would consider doing one of the following:
❤️ Like these tweets 🔄 Retweet the first tweet in this thread so others can see it. 👤 Follow me for more content like this.