Let’s use (X, X, X, X) for talking about specificity

This content originally appeared on CSS-Tricks and was authored by Chris Coyier

I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and Eric took the time to point out the misleading nature of it (I remember scurrying to update it). What was so misleading? The way I was portraying specificity as a base-10 number system.

Say you select an element with ul.nav. I insinuated in the post that the specificity of that selector was 0011 (eleven, essentially), which is a number in a base-10 system. So I was saying tags = 0, classes = 10, IDs = 100, and a style attribute = 1000. If specificity was calculated in a base-10 number system like that, a selector like ul.nav.nav.nav.nav.nav.nav.nav.nav.nav.nav.nav (11 class names) would have a specificity of 0111, which would be the same as ul#nav.top. That’s not true. The reality is that it would be (0, 0, 11, 1) vs. (0, 1, 0, 1) with the latter easily winning.

That comma-separated syntax like I just used solves two problems:

1. It doesn’t insinuate a base-10 number system (or any number system)
2. It has a distinct and readable look

I like the (X, X, X, X) look. I could see limiting it to (X, X, X) since a style attribute isn’t exactly a selector and usually isn’t talked about in the same kind of conversations. The parens make it more clear to me, but I could also see a X-X-X (dash-separated) syntax that wouldn’t need them, or a (X / X / X) syntax that probably would benefit from the parens.

Selectors Level 3 uses dashes briefly. Level 2 used both dashes and commas in different places.

Anyway, apparently I get the bug to mention this every half-decade or so.

The post Let’s use (X, X, X, X) for talking about specificity appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

This content originally appeared on CSS-Tricks and was authored by Chris Coyier

Print Share Comment Cite Upload Translate Updates

APA

Chris Coyier | Sciencx (2021-05-04T14:19:55+00:00) Let’s use (X, X, X, X) for talking about specificity. Retrieved from https://www.scien.cx/2021/05/04/lets-use-x-x-x-x-for-talking-about-specificity/

MLA

" » Let’s use (X, X, X, X) for talking about specificity." Chris Coyier | Sciencx - Tuesday May 4, 2021, https://www.scien.cx/2021/05/04/lets-use-x-x-x-x-for-talking-about-specificity/

HARVARD

Chris Coyier | Sciencx Tuesday May 4, 2021 » Let’s use (X, X, X, X) for talking about specificity., viewed ,<https://www.scien.cx/2021/05/04/lets-use-x-x-x-x-for-talking-about-specificity/>

VANCOUVER

Chris Coyier | Sciencx - » Let’s use (X, X, X, X) for talking about specificity. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/04/lets-use-x-x-x-x-for-talking-about-specificity/

CHICAGO

" » Let’s use (X, X, X, X) for talking about specificity." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/05/04/lets-use-x-x-x-x-for-talking-about-specificity/

IEEE

" » Let’s use (X, X, X, X) for talking about specificity." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/05/04/lets-use-x-x-x-x-for-talking-about-specificity/. [Accessed: ]

rf:citation

» Let’s use (X, X, X, X) for talking about specificity | Chris Coyier | Sciencx | https://www.scien.cx/2021/05/04/lets-use-x-x-x-x-for-talking-about-specificity/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.