Big CSS

Bb854891c46db72f4a6f9da4504e879a?s=47 Harry Roberts
September 07, 2012

Big CSS

Slides from Big CSS at Canvas Conf, Birmingham, 2012

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

Bb854891c46db72f4a6f9da4504e879a?s=128

Harry Roberts

September 07, 2012
Tweet

Transcript

  1. BIG CSS Canvas Conf, Birmingham 2012 BigCSS

  2. HARRY ROBERTS csswizardry.com @csswizardry

  3. bit.ly/NiOAOR

  4. None
  5. BSKYB Massive sites Loads of devs UI heavy Long running

    projects
  6. faavorite.com

  7. FAAVORITE Fairly small Two devs UI heavy Long running project

  8. WRITING CSS IS EASY...

  9. .foo{ color:red; /* Very easy... */ }

  10. ARCHITECTING IT ISNT... ,

  11. SKYBET.COM Biggest project I ever worked on... <10,000 lines of

    CSS 2 files
  12. MO DEVS, MO PROBLEMS , ,

  13. CSS DOESNT KILL PEOPLE... Other developers do ,

  14. CSS = WTF

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

    interdependencies... Is, by nature, self-explanatory. CSS relies on inheritance... The cascade... Specificity.
  16. DEFER MORE WORK TO THE HTML

  17. 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
  18. OOCSS Promotes better understanding of everything Solves problems with/in vanilla

    CSS Can be combined with preprocessors
  19. 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
  20. OBJECTS Design patterns, not components Very vaguely named Insemantic classes

    (e.g. .media) , ,
  21. EXTENSIONS Much, much more specific Very explicitly named Much longer

    classes (e.g. .user-avatar-link)
  22. GOOD CSS HAS A ONE-TO-MANY RELATIONSHIP WITH HTML

  23. NAV ABSTRACTION .nav{ list-style:none; margin-left:0; } .nav > li, .nav

    > li > a{ display:inline-block; }
  24. .nav{} class="nav user-links" class="nav site-nav" class="nav breadcrumb" class="nav sponsor-logos" class="nav

    footer-nav"
  25. faavr.it/csswizardry 45 instances on one page 9 unique 8 lines

    of CSS
  26. THE EASIEST WAY TO KEEP CSS MAINTAINABLE IS TO AVOID

    WRITING IT
  27. CASE STUDY — BSKYB

  28. USER-ACTIONS MENU Single component One ID on the <ul> Lots

    of descendants
  29. OR...?

  30. A BLOCKY LIST .ui-list{} Generic list Any type of content

  31. ICONS <i class=s></i> As portable as <img> Spriteable

  32. ICONS WITH TEXT .ico-text{} Sorts spacing/alignment Any icon, any text

  33. SPLIT ITEMS .split{} Any type of content Restaurant menus etc

  34. USER-ACTIONS MENU A UI-list filled with... Icon objects... Icon-text objects...

    Splitter components.
  35. 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...
  36. TIPS AND TRICKS

  37. KEEP SPECIFICITY LOW NO IDs IN CSS!!! Write rulesets in

    specificity order Avoid qualifying selectors Avoid unnecessary nesting Avoid chaining selectors
  38. 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
  39. 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
  40. 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
  41. AVOID UNNECESSARY NESTING .carousel .pane{} -> .pane{} Increases specificity Limits

    portability Less efficient
  42. AVOID CHAINING SELECTORS .msg.error{} -> .error-msg{} Increases specificity Less efficient

  43. INDENT RULESETS .carousel{} .panes{} .pane{} .pane-title{} .pane-img{}

  44. INDENT RULESETS <div class=carousel> <ul class=panes> <li class=pane> <h3 class=pane-title>

    <img class=pane-img>
  45. CONTENT IS KING

  46. CONTENT IS KING /* comments */

  47. QUASI-QUALIFIED SELECTORS /*html*/.product-page{} /*ol*/.breadcrumb{} /*table*/.winners{}

  48. 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 */
  49. TABLE OF CONTENTS AND SECTION TITLES /* $MEDIA */ .media{}

    ... /* $MAIN */ html{} ... /* $SITE-NAV */ .site-nav{}
  50. TAGS IN CSS /* ^navigation ^lists ^text */ .nav{} .nav

    > li, .nav > li > a{}
  51. TAGS IN CSS /* ^layout ^lists ^tables */ .matrix{} .matrix

    > li{}
  52. COMMENTED OUT HTML /* <ul class=nav> <li><a href=/>Home</a> </ul> */

    .nav{} .nav > li, .nav > li > a{}
  53. OBJECT/EXTENSION POINTERS /* Extend `.nav{}` in theme.css */ .nav{} .nav

    > li, .nav > li > a{}
  54. OBJECT/EXTENSION POINTERS /* Extends `.nav{}` in base.css */ .breadcrumb{} .breadcrumb

    > li, .breadcrumb > li > a{}
  55. SAY WHAT NOW?!

  56. 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
  57. CSS ISNT ALWAYS THE PROBLEM Other developers Lack/loss of knowledge

    Differing techniques Forgetfulness ,
  58. OTHER DUDE(TTE)S Nicole Sullivan — @stubbornella Jonathan Snook — @snookca

    Nicolas Gallagher — @necolas
  59. HARRY ROBERTS csswizardry.com @csswizardry