$30 off During Our Annual Pro Sale. View Details »

Breaking Good Habits

Harry Roberts
February 12, 2012

Breaking Good Habits

Talk first given at The Digital Barn (Barnsley, UK) 11 February, 2012.

Harry Roberts

February 12, 2012
Tweet

More Decks by Harry Roberts

Other Decks in Design

Transcript

  1. View Slide

  2. Breaking Good Habits
    Harry Roberts—@csswizardry

    View Slide

  3. Harry who?!
    •Web designer/developer
    •Senior UI Developer—BSkyB
    •@csswizardry
    •csswizardry.com

    View Slide

  4. Necessary
    explanation of the
    cheesy, overly-
    cryptic talk title.

    View Slide

  5. Web standards…
    •A great idea? Definitely!
    •Well intentioned? You bet!
    •Ambiguous? Sadly :(
    •Open to interpretation? Unfortunately…

    View Slide

  6. …web standards
    •Rules? Definitely not!

    View Slide

  7. Best practices
    •Best for who?
    •What are we achieving?
    •What do we really want to achieve?
    •Are we always solving the right
    problems for the right people?

    View Slide

  8. Good habits?
    •Avoiding classes and IDs
    •‘Handcrafting’ our CSS
    •Avoiding extra markup

    View Slide

  9. Bad habits?
    •Classitis—using too many classes
    •Grid systems
    •Extra markup
    •‘Insemantic’ class names

    View Slide

  10. We’ve been
    solving the wrong
    problems for the
    wrong people!

    View Slide

  11. View Slide

  12. The 4 ‘-ility’s
    •Maintainability
    •Flexibility
    •Extensibility
    •Predictability

    View Slide

  13. Maintainability

    View Slide

  14. Flexibility

    View Slide

  15. body > div:nth-of-type(2) > article:first-
    child > p:first-child{ font-size:1.2em }
    Lorem ipsum dolor sit amet...

    View Slide

  16. Be ?#*@ing explicit!

    View Slide

  17. .intro{ font-size:1.2em; }
    Lorem ipsum dolor sit
    amet...

    View Slide

  18. Specific !== explicit

    View Slide

  19. Extensibility

    View Slide

  20. Extensible
    •Stop thinking in pages…
    •…think in components…
    •…then think in abstractions.

    View Slide

  21. Predictability

    View Slide

  22. Expect the
    unexpected
    Always build like your client’s CMS is a bulldozer…

    View Slide

  23. View Slide

  24. CSS selectors

    View Slide

  25. IDs
    •Don’t use IDs in CSS
    •Ever.

    View Slide

  26. IDs
    •No advantage over classes.
    •Waaaaaay overly specific.
    •Not dissimilar to !important
    •Everything you can do with an ID can
    be done with a class.

    View Slide

  27. Classes
    •No one uses classes except browsers
    and other developers (and
    microformats).
    •Classes are neither semantic or
    insemantic; they’re sensible or
    insensible.

    View Slide

  28. View Slide

  29. .red
    .red{
    color:red;
    }
    I am a designer
    and developer

    View Slide

  30. .red
    .red{
    color:blue; /* WTF */
    }
    I am a designer
    and developer

    View Slide

  31. .brand
    .brand{
    color:#BADA55; /* FTW */
    }
    I am a designer
    and developer

    View Slide

  32. View Slide

  33. Objects and
    abstractions

    View Slide

  34. The media object
    bit.ly/cCY3Ew

    View Slide

  35. The media object
    bit.ly/cCY3Ew

    View Slide

  36. The media object
    bit.ly/cCY3Ew

    View Slide

  37. The media object
    bit.ly/cCY3Ew

    View Slide

  38. The media object
    bit.ly/cCY3Ew


    Lorem ipsum...

    .media,.body { overflow:hidden; }
    .img { float:left; margin-right:20px; }
    .img img { display:block; }

    View Slide

  39. The media object
    bit.ly/cCY3Ew



    Lorem ipsum...
    Read more...


    View Slide

  40. View Slide

  41. Nicole Sullivan
    @stubbornella

    View Slide

  42. The nav abstraction
    bit.ly/oD2M9n

    View Slide

  43. .nav{
    list-style:none;
    margin-left:0;
    }
    .nav li{
    display:inline;
    }
    .nav a{
    display:inline-block;
    }
    The nav abstraction
    bit.ly/oD2M9n

    View Slide

  44. ...
    .breadcrumb li:before{
    content:"» ";
    }
    .breadcrumb li:first-child:before{
    content:"";
    }
    Breadcrumbs…?
    bit.ly/oD2M9n

    View Slide

  45. The island object
    bit.ly/oqQ7JJ

    View Slide

  46. The island object
    bit.ly/oqQ7JJ
    ...
    .island{
    padding:1.5em;
    }
    .island > :last-child{
    margin-bottom:0;
    }

    View Slide

  47. The island object
    bit.ly/oqQ7JJ
    ...
    .island.promo{
    color:#fff;
    background-color:#C0FFEE;
    }

    View Slide

  48. Double stranded
    heading hierarchy
    h1,.alpha { font-size:; line-height:; }
    h2,.beta { font-size:; line-height:; }
    h3,.gamma { font-size:; line-height:; }
    h4,.delta { font-size:; line-height:; }
    h5,.epsilon { font-size:; line-height:; }
    h6,.zeta { font-size:; line-height:; }

    View Slide

  49. Double stranded
    heading hierarchy

    Recent tweets
    ...

    View Slide

  50. View Slide

  51. Grid systems

    View Slide

  52. View Slide

  53. Abstract layout
    into its own layer
    Keep components free of dimensions

    View Slide

  54. csswizardry.com/fluid-grids

    View Slide

  55. Straighten up!
    @media(max-width:480px){
    .grid{
    float:none;
    clear:both;
    width:auto;
    margin:0;
    }
    }

    View Slide

  56. View Slide

  57. All together now!

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. Benefits and side-
    effects
    •Sites are faster to build…
    •…more robust
    •…more maintainable
    •…more consistent
    •…and incidentally more efficient.

    View Slide

  69. Efficiency on the
    client side
    •Reused classes are ‘performance
    freebies’
    •Abstractions mean DRYer code; less to
    download and evaluate
    •Classes match quicker than
    descendants

    View Slide

  70. Now what?
    •Solve problems for the right people.
    •Keep yourselves happy and sane.
    •Learn when enough is enough; cut
    yourself some slack.

    View Slide

  71. However bad you
    think it is, there’s
    always worse…

    View Slide

  72. Breaking Good Habits
    •Harry Roberts – @csswizardry
    •csswizardry.com
    •Nicole Sullivan – @stubbornella

    View Slide