| The points brought up in these slides directly reflect my experiences over the past 3 years of doing my own CSS. If you're familiar with the CSS precedence rule, these slides might read like blog post; they did for me. Strangely, I rarely see the precedence rule brought up in CSS documentation or tutorials. Not until I read "The Ultimate CSS Reference", by Tommy Olsson & Paul O'Brien. I highly recommend this book. "Coding by Firebug" as it's called in the slides, probably refers to what I used to do before reading the above-mentioned book: tweak styles, wonder why they weren't taking effect, then add classes or IDs to the markup until something sticked. This is the "increasing specificity" also noted in the slides. Once I understood the CSS rule of specificity - inline, id, class, element - I stopped polluting my markup and CSS. Nowadays, I generate CSS with SASS partials (templates within a Ruby on Rails app), compiled together by Compass. Each partial starts with an ID at the top, with other ids, classes, or elements nested underneath. These are compiled into CSS - and I'm sure at the CSS level there is TONS of duplication - but this doesn't worry me one bit; my source code is DRY. I suspect this is what Facebook and the other sites mentioned in the first few slides do too, so the rule duplication is probably not such a code smell as one might think. |
I'm not entirely sure what she's suggesting since I'm reading the slides without any context, but it seems, given the thing about cutting down css file size for Facebook, the method she's suggesting reduces duplication in the actual css file.