Discussion on: How to calculate CSS specificity of your style rules

[Tracy Gilmore]

Hi Smitter,
A very well prepared and informative article. Thank you.
I think CSS specificity is actually calculated from 5 going on 6 factors. I remember them using the mnumonic IS-ICE

• I: Important overrides specificity in most cases.
• S: Style has an overriding effect.
• I: ID attribute/selector
• C: Class attribute/selector
• E: Element selector

I have a demonstration on CodePen.

The 6th factor, which I have yet to utilise myself is @layer, which have a scoping effect.

Regards, Tracy

[Smitter]

Yes the factors you have mentioned are totally right. In this article I was abit more focused on how to calculate the weight as a number that causes a style to be applied instead of the other. Acording to the mnemonic IS-ICE, i may say the article has explained in detail on the ICE part. Towards the end, I have touched lightly on IS part:

For example:

p {
   color: #00ff00 !important;
} /* [0, 0, 1] */
p {
   color: #ff0000;
} /* [0, 0, 1] */

Both rules have the same weight but the first rule will take precedence because of use of !important keyword. Otherwise, the second rule would have taken precendence.

Where I mean that the most recently applied style wins, BUT if only the previous style does not have an !important keyword.

Regarding the @layer, When you don't specify a layer in your stylesheet, the CSS processor will place your styles(those not in a layer) into an anonymous layer. Now styles in anonymous layer have a higher specificity weight than a custom layer you define on your stylesheet. A good usecase can be to put bootstrap styles in a layer you have created.
And your own styles you write not enclosed in a layer, or in a layer you have created more recently. This causes CSS processor to always apply your styles overriding what bootstrap has set.

Thanks for the mnemonic, It makes it easy to remember