Why My CSS3 Works! 2013

It may seem funny to discuss the topic of why my CSS works, but I thought I would share some insights on the process I use.

Over the years many people have asked me to help them “fix” their CSS.  It goes without saying the reason they ask is because their CSS is broken!  However, these are intelligent people and most of the time, their CSS is not far from what they want.  Most of the time the problems they are having is just because of the order they have placed their CSS properties, on their Style Sheets.  Really, it is that simple!

What I do for them is have them order their Style Sheets the same way I order mine, and usually they quickly find and fix their own work!  So now I will share with you how I order the properties on my CSS Style Sheets, or basically, Why my CSS works!

There are many people out there who are giving advice how to order a CSS Style Sheet. However, if you ask them “Why?”, they usually say something like, “It works for me!”

Well, The CSS Million System Number works for Everyone, because it actually uses the same “cascade” system CSS uses!

Here is how to fix your CSS.

Step 1 ~ Normalize

I am a big fan of the HTML5 Boilerplate and recommend you use it.  Even if you don’t choose to use it, I would highly recommend using the Normalize.css as a starting point for all your CSS.  Just make it your first CSS! Or embed it as the first part of your first custom CSS Style Sheet.

http://html5boilerplate.com/
http://necolas.github.io/normalize.css/

Step 2 – The CSS Million System Number

If you are not familiar with the CSS Million System you should read CSS Specificity Easy Calculator, CSS Million System.

Step Two is to assign a CSS Million System Specificity Number to each of the CSS proprieties as a comment. Then arrange the order of their CSS Style Sheets according to this number. (See Example at the bottom of this page.)

Step 3 – By HTML Nesting

Sometimes CSS properties will have the same CSS Million System Specificity Number.  If they do, then order them by natural HTML order within their Specificity Number Order.

For example, html before body, body before div, ol or ul before li, etc.

Step Three is not as important as step one.  It just helps you find things easier.

Step 4 – Without !important

If you have applied any !important to any CSS property, remove it!  You really won’t need it now!

Step 5 – With Style

If your markup has any style attributes <p style=”color: red;”>, consider how important they are?  It is better to remove them and put them in your CSS Style Sheets with a class or id.

STOP ~ You’re Finished!

Your CSS Style Sheets are now ready to use!  All you need to remember is, “The Last Rule Wins!”  So if you are having a problem with your CSS, you will just need to re-write the rule so the CSS Million System Specificity Number moves it into the right place (up or down) on your Style Sheet (either before the rule you want to apply, or after the rule that it should over ride).

CSS Style Sheets are So Easy!

Below this is simply the reasons this system works ~ all the time!

Why This Works – Decimal

Well, it is because the CSS Million System Specificity Number is a Human Understandable Number.

It goes all the way back to your grade school when your teacher taught you that 100 was more than 99 (or 10 was more than 9).

It is also because our human trait is to try to simplify things.  Many CSS Specificity advice websites, will tell you to just remove the commas in the Specificity Number.  So 1,0,1 becomes 101 and 1,2,3 becomes 123.  In numbers at or below 9, that works.  But what about 1,0,15?  1o15 may not work (win) against 110!

W3C would have you change the number system into some higher base!  I quote W3C “(in a number system with a large base)”.

That sounds a little scary, but I have been doing this for so long I can actually think in base 2, base 4, base 8, and base 16 (and with some trouble in base 10!).  But what if I need base 32? Or base 64?

Furthermore, 1,0,15 may convert well to the hexadecimal 10F, but how many people here can really think, add, and subtract in hexadecimal?  A few maybe?

What about 1,0,16?  Would that be 1010 in hexadecimal?  No!  You would need base 32 to get 10G in triacontakaidecimal!  That is what the W3C recommends!  Did anyone learn triacontakaidecimal in grade school?

Now answer this simple question, can anyone tell me which is larger?

1,000,001 in decimal (1,0,1 or 101 in triacontakaidecimal)
1,000,015 in decimal (1,0,F or 10F in triacontakaidecimal)
1,000,016 in decimal (1,0,G or 10G in triacontakaidecimal)
1,001,000 in decimal (1,1,0 or 110 in triacontakaidecimal)

And what number would ALL be?  Compared with HAT?
( 10,030,030 vs 17,010,029 respectively, using the W3C method. )

Please note that I am not converting decimal into triacontakaidecimal directly.  Instead I am using the W3C method for comparing CSS Specificity (which I think is way to difficult, in light of the CSS Million System Specificity).

W3C CSS Specificity is too difficult,
even if you are a Star Wars fan, or a top ranked Poker Player!

The truth is, decimal numbers are Human Understandable Numbers!  We read, write, think and calculate in decimal all the time.  I doubt anyone reading this actually read, wrote, thought or calculated in triacontakaidecimal today, or any time in the last 5 years!

The CSS Million System Specificity Number is a Human Understandable Decimal Number!

Why This Works – The Last Rule Wins!

The other reason this works so well, is because the first thing we learned about CSS is, “The Last Rule Wins!”  This is true if you say “The Last Equal Rule Wins!”  Specifically, “The Last Rule, with the Same Specificity Number, Wins!”

As you can see, “The Last Rule Wins!” is a lot easier! (But it is not the whole truth!)

This CSS Style works (even for beginners and advanced) because it sets the CSS proprieties on the Style Sheet, into the CSS Million System Specificity Number Order.  In other words, when you write your CSS Style Sheets this way…

“The Last Rule Wins!” ~ REALLY!

 Example:

body {
/* Specificity = 1 */
color : green;
}

div {
/* Specificity = 1 */
color : blue;
}

body > p {
/* Specificity = 2 */
color : #6789ab;
}

body div p {
/* Specificity = 3 */
color : #000000;

}.some-class {
/* Specificity = 1,000 */
color : red;
}

ol.ol-class {
/* Specificity = 1,001 */
color :  #654321;
}

p a:link {
/* Specificity = 1,002 */
color : #123456;
}

h1[id=some-h1-id] a:link {
/* Specificity = 2,002 */
/* Note: Declaring an id as an attribute,
     in square brackets [], reduces its specificity */
/* See h1#some-h1-id below */
color :  #fedcba;
}

li#some-id {
/* Specificity = 1,000,001 */
color : #234567;
}

h1#some-h1-id a:link {
/* Specificity = 1,001,002 */
/* Note: Declaring an id as an attribute,
     in square brackets [], reduces its specificity */
/* So this rule would win over h1[id=some-h1-id] above */
color :  #89abcd;
}

ol#some-ol-id li#an-li-id a:active {
/* Specificity = 2,003,001 */
color : #123456;
}