CSS Million System
CSS Specificity Easy Calculator, CSS Million System
On the heals of my article, Simple CSS: Specificity for Beginners: Billion System, my students asked three questions…
- “So three rules, that I can do in my head, can solve virtually all CSS Specificity Problems?”
- “Could CSS Specificity be any easier?” (This was meant to be rhetorical!)
- “Wouldn’t it be better to call it: The CSS Million System!“
The answer to all three questions is YES!
I present to you the CSS Million System, AKA: The CSS Specificity Easy Calculator.
The CSS Million System
The CSS Million System gives you three simple rules, you can do in your head, to find a single human understandable number to compare, which will resolve all CSS Specificity problems. Here is it…
Elements and Pseudo-elements earn one point each.
Classes, Pseudo-classes, and Attributes earn 1,000 points each (except :not).
ID‘s earn 1,000,000 points each.
Add these together and the largest number wins!
Why This Works So Well?
- It compares CSS properties with Human Understandable Numbers!
(The kind we learned in grade school!)
- I never use !important for anything! NEVER!
(Except temporary testing!)
- That means Style Attributes in my markup always win! ALWAYS!
NO IFs, ANDs or BUTs!
About this time someone is going to say…
That is true If …
And I’d like to point out …
Yeah But …
If you feel you must write a comment using these terms, and contributing nothing on how to compare the CSS Specificity of one CSS property to that of another, please First Read:
Simple CSS: Specificity for Beginners: Billion System
Why My CSS Works!
Errors and Corrections
- If you think you have a specific and tested case where the CSS Million System did not work, I would like to know it!
(We all have developmental LAMP or WAMP servers in our desktops and laptops, so send me some real tested snippets if you think the CSS Million System did not work. Be sure to first read the above section on IFs, ANDs and BUTs and the below section on Don’t Ask / Don’t Tell.)
Don’t Ask / Don’t Tell (FAQ’s?)
(Flawedly Asked Questions!)
- Obviously the rule applies to explicitly declared elements only. ONLY!
Those are elements that have been explicitly identified with an element name, an id (#id) or a class (.class).
(I have seen people trying to calculate CSS Specificity on properties inherited from the parent element, in order to compare it to an explicitly declared element property. It does not work, what is explicitly declared will win every time!)
- Obviously this is not CSS Standard Notation. It was not meant to be. It was meant to make it easy to compare one CSS property to another using Human Understandable Numbers. EASY!
(However, there is an Easy Conversion To CSS Standard Notation and an explanation of Delimiters on the Simple CSS: Specificity for Beginners: Billion System page, for those who want such things.)
2 Comments