The Truth About CSS Specificity

Me, at CSS Day 2022, talking about Specificity (and the Cascade) Whenever a post about Specificity in CSS – and by extension the Cascade itself – gets published I get very excited as it’s a core concept of the language that everyone should know. The more articles on this, the better! However, I also sometimes raise one of my eyebrows as sometimes I, unfortunately, encounter something that’s just outright wrong. To remove some of the confusion, here’s a list of misconceptions about Specificity in CSS … ~ # Table of Contents Misconception 1: Specificity is a decimal score Misconception 2: Using the style attribute adds Specificity Misconception 3: Using !important adds Specificity Learn More ~ # Misconception 1: Specificity is a decimal score Some, typically older, articles out there express Specificity as a decimal score, or mention that a thing like a class selector “adds 10 points”. This is inaccurate as it would imply that 11 element selectors with their “1 point each” would beat 1 class selector that only has “10 points”. Instead, Specificity is a triple (or a triad) that has three components: A, B, and C. The values for A, B, and C depend on what type of selector you use. A = id-like specificity B = class-like specificity C = element-like specificity It is often represented using the (A,B,C) notation. For example: (1,0,2). The alternative A-B-C notation is also commonly used. Specificities are compared by comparing the three components in order: the specificity with a larger A value is more specific; if the two A values are tied, then the specificity with a larger B value is more specific; if the two B values are also tied, then the specificity with a larger C value is more specific; if all the values are tied, the two specificities are equal. In code, it looks like this: const compare = (s1, s2) ={ if (s1.a === s2.a) { if (s1.b === s2.b) { return s1.c – s2.c; } return s1.b – s2.b; } return s1.a – s2.a; }; For example, (1,0,0) is a higher specificity than (0,10,3) because the A value in (1,0,0) (which is 1) is greater than the A value from (0,10,3) (which is 0). Also see this excerpt from my CSS Day 2022 talk about the cascade: Excerpt from my CSS Day talk on the Cascade, covering how to write and compare Specificity 💡 While you could represent the triad as a decimal by adding enough leading zeroes, it comes with its own set of challenges: the number you end up with is hard to read/parse + you would need to add “enough” zeroes to get a correctly sortable result. My advice here remains this: don’t. Where the confusion comes from: Back in CSS Selectors 3, the spec mentioned that you could concatenate the numbers to get the specificity. Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity. While it is caveated with “in a number system with a large base” the clause got ignored, most likely because the spec showed examples in base 10 – e.g.  » Read More