flukeout/flukeout.github.io — pull request #3 by funkhouserw (2014-03-16 21:45:47+00:00)
Title: Don't qualify IDs, don't use multiple elements w/ same ID, and more!

Level 21:

Change first instance of #fancy plate to be a bento box. Why?

1) We shouldn't encourage devs to have multiple elements with same ID in dom.

2) This now visually demonstrates how the counting works
board: "(1)(2)[x](3){4}(5)"
instead of
board:"(1)(2)[3](4){5}(6)"

This nuance is lost when the third element is another fancybox, since the counting remains the same.

Level 3:

Add in some text explaining that ul#long is redundant, and that you can just use #long. Qualifying ids less performant, and shouldn't be encouraged

Level 10:

Add in a short warning about using the * selector. Since CSS is read right-to-left, this ends up querying all elements in the DOM, and can be detrimental to page speed. A short warning about this was merited.

I'm not sure if Level 3 and Level 10 changes are what you wanted the focus of CSS Diner to be. There's a lot of quirks/quick tips that *could* be provided in this format, but it was kept relatively clean and devoid of commentary.