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

Breaking Good Habits

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. Breaking Good Habits
    Harry Roberts—@csswizardry

    View full-size slide

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

    View full-size slide

  3. faavorite.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. …web standards
    •Rules? Definitely not!

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Maintainability

    View full-size slide

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

    View full-size slide

  14. Be ?#*@ing explicit!

    View full-size slide

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

    View full-size slide

  16. Extensibility

    View full-size slide

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

    View full-size slide

  18. Predictability

    View full-size slide

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

    View full-size slide

  20. CSS selectors

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Objects and
    abstractions

    View full-size slide

  28. The media object
    bit.ly/cCY3Ew

    View full-size slide

  29. The media object
    bit.ly/cCY3Ew

    View full-size slide

  30. The media object
    bit.ly/cCY3Ew

    View full-size slide

  31. The media object
    bit.ly/cCY3Ew

    View full-size slide

  32. The media object
    bit.ly/cCY3Ew


    Lorem ipsum...

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

    View full-size slide

  33. The media object
    bit.ly/cCY3Ew



    Lorem ipsum...
    Read more...


    View full-size slide

  34. Nicole Sullivan
    @stubbornella

    View full-size slide

  35. The nav abstraction
    bit.ly/oD2M9n

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 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 full-size slide

  39. Grid systems

    View full-size slide

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

    View full-size slide

  41. csswizardry.com/fluid-grids

    View full-size slide

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

    View full-size slide

  43. All together now!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide