CSS resolution rules and specificity

Description

The css property doesn’t take effect in the release build but works fine in the debug build.

Root cause

We applied two css classes in one dom node and didn’t specify the priority (have the same css specificity (0,1,0)), thus the CSS class order matters: the latter one will override the previous one.

However, the css class order is not stable between the debug and release builds.

Solution

After fixing, the classes are like this:

css-specificity-1

We can use the scss file helper tools in VS Code:

css-specificity-2

Caution while nesting & :

css-specificity-3

Cascade

When two rules from the same cascade layer apply and both have equal specificity, the one that is defined last in the stylesheet is the one that will be used.

There are three factors to consider, listed here in increasing order of importance. Later ones overrule earlier ones:

Source order

Specificity

one identifier selector has 1-0-0 specificity
one class selector (attribute selector) has 0-1-0 specificity
one element selector has 0-0-1 specificity
The specificity weight of :not/:is/:has comes from the selector parameter in the list of selectors with the highest specificity.
Combinators, such as +, >, ~, “ ”, and ||, may make a selector more specific in what is selected but they don’t add any value to the specificity weight.

css-specificity-4