Upgrade to Pro — share decks privately, control downloads, hide ads and more …


Harry Roberts
September 07, 2012


Slides from Big CSS at Canvas Conf, Birmingham, 2012

Video: https://www.youtube.com/watch?v=R-BX4N8egEc&hd=1

Harry Roberts

September 07, 2012

More Decks by Harry Roberts

Other Decks in Design


  1. CSS = WTF HTML is viewed in situ... Has no

    interdependencies... Is, by nature, self-explanatory. CSS relies on inheritance... The cascade... Specificity.
  2. CSS PREPROCESSORS Sass > LESS Excellent when used correctly Provide

    a disconnection Less useful than a knowledge of architecture Makes nothing better, only faster to write Still only generating CSS
  3. OBJECTS > COMPONENTS Components are still cumbersome so... Break components

    down further as... Objects and abstractions are more useful. Can reuse a nav abstraction way more than .main-nav
  4. USER-ACTIONS MENU No IDs, lots more markup and classes, a

    LOT less CSS. Bespoke HTML and CSS (once compressed) weighed 147 bytes LESS than the Google favicon! Abstractions come free-of-charge, they are already there and free to use over and over and over and over and over...
  5. KEEP SPECIFICITY LOW NO IDs IN CSS!!! Write rulesets in

    specificity order Avoid qualifying selectors Avoid unnecessary nesting Avoid chaining selectors
  6. NO IDs IN CSS!!! Literally no point It takes 256

    classes to override one ID Make several classes out of the reusable parts of the ID
  7. WRITE RULESETS IN SPECIFICITY ORDER Reset, elements, objects, components, style

    trumps Not in occurrence order (e.g. header, page, footer) Subsequent rulesets should only inherit, never undo
  8. AVOID QUALIFYING SELECTORS p.intro{} -> .intro{} Increases specificity — extra

    selectors Limits reusability — e.g. cannot be used on an <li> Less efficient — more work for the browser
  9. TABLE OF CONTENTS AND SECTION TITLES /* RESET.......Undo defaults MEDIA.......The

    media object MAIN........HTML/BODY, wrappers SITE-NAV....Page’s nav bar FOOTER......Disclaimer, links */

    ... /* $MAIN */ html{} ... /* $SITE-NAV */ .site-nav{}
  11. SAY WHAT NOW?! Write less CSS Reuse more CSS —

    design patterns! Let the HTML do some work for a change! Get some rules, stick to them Comments, comments, comments!!! People are human