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

I used to be simply chatting with Eric Meyer the opposite day and I remembered an Eric Meyer story from my adolescence. I wrote a weblog submit about CSS specificity, and Eric took the time to level out the deceptive nature of it (I keep in mind scurrying to replace it). What was so deceptive? The best way I used to be portraying specificity as a base-10 quantity system.

Say you choose a component with ul.nav. I insinuated within the submit that the specificity of that selector was 0011 (eleven, basically), which is a quantity in a base-10 system. So I used to be saying tags = 0, lessons = 10, IDs = 100, and a mode attribute = 1000. If specificity was calculated in a base-10 quantity 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 might be the identical as ul#nav.high. That’s not true. The truth is that it could be (0, 0, 11, 1) vs. (0, 1, 0, 1) with the latter simply profitable.

That comma-separated syntax like I simply used solves two issues:

It doesn’t insinuate a base-10 quantity system (or any quantity system)It has a definite and readable look

I just like the (X, X, X, X) look. I might see limiting it to (X, X, X) since a mode attribute isn’t precisely a selector and often isn’t talked about in the identical form of conversations. The parens make it extra clear to me, however I might additionally see a X-X-X (dash-separated) syntax that wouldn’t want them, or a (X / X / X) syntax that in all probability would profit from the parens.

Selectors Degree 3 makes use of dashes briefly. Degree 2 used each dashes and commas elsewhere.

Anyway, apparently I get the bug to point out this each half-decade or so.

The submit Let’s use (X, X, X, X) for speaking about specificity appeared first on CSS-Methods.

You’ll be able to assist CSS-Methods by being an MVP Supporter.