I’m not 100% sure I’ve got this right, but I think the section on specificity might be clearer if it included !important in the tuple, because it doesn’t really override everything, it’s just the highest level of specificity.
Understanding specificity as taking the rule with the max specificity, where specificity is just a 5-tuple of !important and the number of selectors of each kind is nice, though. That’s very easy to reason about. Thanks for introducing that idea to me!
Thinking about it some more, it’s actually a 6-tuple because rule order matters too.
You don’t say in your guide how order is determined if you have multiple style sheets. I think sheets are ordered based on the timestamp of when the style element or link element is added to the page (rather than distance to the root element in the dom or time that the sheet is parsed (which may be out of order due to async loading)). But again, not sure.
Possibly the best CSS tutorial I’ve read.
I’m not 100% sure I’ve got this right, but I think the section on specificity might be clearer if it included
!importantin the tuple, because it doesn’t really override everything, it’s just the highest level of specificity.Understanding specificity as taking the rule with the max specificity, where specificity is just a 5-tuple of
!importantand the number of selectors of each kind is nice, though. That’s very easy to reason about. Thanks for introducing that idea to me!Good idea.
Thinking about it some more, it’s actually a 6-tuple because rule order matters too.
You don’t say in your guide how order is determined if you have multiple style sheets. I think sheets are ordered based on the timestamp of when the style element or link element is added to the page (rather than distance to the root element in the dom or time that the sheet is parsed (which may be out of order due to async loading)). But again, not sure.
Here’s a classic from 2005 on specificity: https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
I think you accidentally a few words ;)
Whoops! Thanks. :)
And here :)
So good I’m reading again ;)