Q & A

How many cascades are there when a web page loads?

Three. The User agent, the Author, and the Client.

If there's three cascades, which one wins?

The last one. That's why it's a cascade; the last thing always wins.

Does an !important in our stylesheet beat the !important in the end-user's?

No. It's a cascade. The last stylesheet wins

So what does the !important overide?

All properties in the current cascade, and all properties from the previous cascade

So when should you use !important

Never. It ruins friendships.

Common scenarios

    .header{
        background: gray;
    }
    .homepage .header{
        background: blue;
    }
    /* Bunch of code happens in between*/
    .header {
        background: yellow !important;
    }

            

Common scenarios

    .header{
        background: gray;
    }
    .homepage .header{
        background: blue;
    }
    /* Bunch of code happens in between*/
    .homepage .header {
        background: yellow;
    }

            

Are Stylesheets parsed left-to-right, or right-to-left?

Right to left. The last element in your selector is always the first one read.
When you write a selector, the thing you're targeting is the last one written. Everything before that is just details on hwo to get to it.

Which selector most efficiently overides: an element || a class || an ID?

Inline Style > ID > Class > element

How many classes do you need to override an ID?

256. Unless it's Opera. Then it's about 65,000

True or false: chaining a selector improves performance? (e.g: div#someSpecificThing)

False. It requires the browser to first identify the element by the final selector, and then check the markup again to see if it matches the next selector. All chaining does is improve specificty.

Does having multiple descendant selectors improve performance? (e.g: section .article #someSpecificThing)

Nope! It's more work for the browser. If the last element is the one that you're styling, then why do you need to add anything in front of it?

Does styling on an ID improve performance? (e.g.: #someHeader{font-size:4em}

YES! But that doesn't make it a good idea.

What overrides an ID?

Either two IDs, and inline style, or some jackass that wants to ruin your day with an !important

Common scenarios

    /* good */
    header{
    background: gray; 
    }
    /*better */
    .header{
        background: gray;
    }
    /*mmmm... maybe? */
    .homepage .header{
        background: blue;
    }
    /*best*/
    .homepageHeader{
      background: blue
    }

Common scenarios

    /* good */
    header{
    background: gray; 
    }
    /*better */
    .header{
        background: gray;
    }
    /*mmmm... maybe? */
    .homepage .header{
        background: blue;
    }
    /*best*/
    .homepageHeader{
      background: blue
    }

<div id="someWrapper" class="wrapper">
    <h3 id="someHeader" class="wrapper">Howdy there!</h3>
</div>