Why Css Variables Override Another File's Css Variable?

When I define a variable in various CSS files, and include these files in my HTML file, then it overrides the previous variable. Why is it happening? Let's say that I have test1.cs

Solution 1:

CSS = Cascading Style Sheets... this means the sequence of definition matters, the most recent and more specific takes precedence. If you switched test1 and test2 over in your html you'd get a different result because the variable is defined as the more recent value.

I recommend you use a different variable name for your different .css files if you require them to not share this value.

Solution 2:

When you include both stylesheets, all of their rules are combined into one single stylesheet. This means that you introduce a conflict in two :root CSS rules with the same custom property declaration:

:root {
  --size-of-font: 5rem;
}

:root {
  --size-of-font: 1.2rem;
}

Cascade resolution means that the specified value of the --size-of-font custom property is 1.2rem, not 5rem. Simply, the second declaration overrides the first as both rules have identical selectors.

This value of 1.2rem is then applied to both uses of var(--size-of-font), in .logo and .outer, again because two stylesheets combine to form one. .logo does not only see the --size-of-font in its own stylesheet; it sees whatever is resolved by the cascade, taking all declarations into account.

Solution 3:

Here we need to consider two things: How custom properties works and how they are evaluated using var().

1. The first part is trivial because custom property behave the same as any other property. From the specification we can read:

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules, can be made conditional with @media and other conditional rules, can be used in HTML’s style attribute, can be read or set using the CSSOM, etc.

Considering this, the last custom property defined in your case will override the first one:

:root {
    --size-of-font: 5rem;
 }
.logo{
    font-size: var(--size-of-font);
}

:root {
  --size-of-font: 1.2rem; /* This one will win !*/
}
.outer {
    font-size: var(--size-of-font);
    cursor: pointer;
    text-align: center;
}

2. When using var() we need to also consider some rules like defined in the same specification:

To substitute a var() in a property’s value:

1. If the custom property named by the first argument to the var() function is animation-tainted, and the var() function is being used in the animation property or one of its longhands, treat the custom property as having its initial value for the rest of this algorithm.
2. If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property. Otherwise,
3. if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. If there are any var() references in the fallback, substitute them as well.
4. Otherwise, the property containing the var() function is invalid at computed-value time

In our situation, we will consider the (2) because .logo will inherit the custom property defined inside :root with its value 1.2rem (not an initial value).

In other words, the evaluation of a custom property doesn't consider the order of their appearance in the CSS file. It considers the value of the custom property that is resolved as an ordinary property.

---

Here another useful question where you can get more details and more examples: CSS scoped custom property ignored when used to calc var in outer scope

Solution 4:

Yes it will overwrite. If I have two classes having the same name like:

test1.css contains

.text-color{
    color:red;
}

test2.css contains

.text-color{
    color:blue
}

and apply them in sequence

test1.css test2.css

it will apply the CSS which is in test2.css. It takes the latest CSS if the class names are the same.

Solution 5:

There are 3 ways to CSS for websites, within a CSS file, <style> tag, or inside an HTML tag. CSS files will always have precedence over any other CSS format. <style> tags only have precedence over CSS tags in HTML, which are at the bottom.

Here's a visual

1. CSS Files (Comes first)

2. <style> (Cannot override CSS files but can override HTML inline)

3. HTML inline styles (least important)