content bloom

Front-end

Our Goals

There's a lot we could talk about in front-end development, but today we only have two goals, and they relate to CSS…

  • Sucking less
  • Winning more

Warning

This presentation may not work in IE8.

And I don't care.

Front End

The Agenda

Sucking Less in the Cascade

  • !important failures
  • !important Examples

Winning More in the Stylesheet

  • CSS Selectors and browser parsing
  • CSS Selector examples

Sucking less

!important failures

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.

The Big Idea

!important is more likely to make things worse than it is to make thins better. It's never ok for a developer who has control over all of the stylesheets to use it.

Sucking Less

!important failures

Common scenarios

Specificity is misunderstood

Often, we use !important when we don't understand how the cascade will behave.

Remember that !important disrupts the cascade.

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

            

Sucking Less

!important failures

Common scenarios

Rely on the cascade

The last item in the cascade wins. You can provide the same selector, but put it at the end, and you're fine.

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

            

Sucking Less

!important failures

Howdy there!

Winning in Stylesheets

Performance and Selectors

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

Winning More

Efficient Selectors

Common scenarios

Specificity is misunderstood

Often, we use !important when we don't understand how the cascade will behave.

Remember that !important disrupts the cascade.

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

Winning More

Efficient Selectors

Common scenarios

Specificity is misunderstood

Often, we use !important when we don't understand how the cascade will behave.

Remember that !important disrupts the cascade.

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

Winning More

Selector shenanigans

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

Howdy there!

from Texas

<!--Insert sincere gratitude -->

Thank You!