Issue with discussion of concatenation for specificity

[dtarvin]

Your discussion of concatenating for specificity has a problem with it - if c or d are both at 10 or above. What I mean is, if you have 10 or more classes or tag names, pushing the numbers together without any separating dashes or commas gives you an incorrect specificity.

Suppose 1 id, 10 classes and 2 tags - with concatenation, that gives you 1102, which is incorrect. If you have another element that is just 2 ids, no classes and no tags, the concatenated number would be 200, which beats the concatenation of 1102.

You also can't add the numbers together, because 10 classes do not have the same specificity as 1 id (Here's a CodePen where I put 100 classes and 1 id on an element: https://codepen.io/dtarvin/pen/gOqPKaM).

You can only show the true ranking of specificity by separating the numbers with dashes or something like this: 1-10-2, 2-0-0. The highest number in the first column wins. If they're the same the highest column in the second number wins. If they're the same the highest number in the third column wins. If they're the same the style that is lowest in the stylesheet wins.

I would be happy to submit a pull request on this if you like.