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

Breaking Good Habits

Harry Roberts
April 28, 2012

Breaking Good Habits

Slides from my first conference talk at Front-Trends (Warsaw, Poland) 26 April, 2012.

Video: https://vimeo.com/44773888

Harry Roberts

April 28, 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. faavorite.com

    View Slide

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

    View Slide

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

    View Slide

  7. …web standards
    •Rules? Definitely not!

    View Slide

  8. 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

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

    View Slide

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

    View Slide

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

    View Slide

  12. View Slide

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

    View Slide

  14. Maintainability

    View Slide

  15. Flexibility

    View Slide

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

    View Slide

  17. Be ?#*@ing explicit!

    View Slide

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

    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. .red
    .red{
    color:red;
    }
    I am a designer
    and developer

    View Slide

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

    View Slide

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

    View Slide

  31. View Slide

  32. Objects and
    abstractions

    View Slide

  33. The media object
    bit.ly/cCY3Ew

    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


    Lorem ipsum...

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

    View Slide

  38. The media object
    bit.ly/cCY3Ew



    Lorem ipsum...
    Read more...


    View Slide

  39. View Slide

  40. Nicole Sullivan
    @stubbornella

    View Slide

  41. The nav abstraction
    bit.ly/oD2M9n

    View Slide

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

    View Slide

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

    View Slide

  44. 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:; }
    bit.ly/yyReiE

    View Slide

  45. View Slide

  46. Grid systems

    View Slide

  47. View Slide

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

    View Slide

  49. csswizardry.com/fluid-grids

    View Slide

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

    View Slide

  51. View Slide

  52. All together now!

    View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

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

    View Slide

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

    View Slide

  65. Breaking Good Habits
    •Harry Roberts – @csswizardry
    •csswizardry.com
    •faavr.it/csswizardry
    •Nicole Sullivan – @stubbornella

    View Slide