Breaking Good Habits

Transcript

1. 1.

   None
2. 2.

   Breaking Good Habits Harry Roberts—@csswizardry

3. 3.

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

4. 4.

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

5. 5.

   Web standards… •A great idea? Definitely! •Well intentioned? You bet!

   •Ambiguous? Sadly :( •Open to interpretation? Unfortunately…
6. 6.

   …web standards •Rules? Definitely not!

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

   Good habits? •Avoiding classes and IDs •‘Handcrafting’ our CSS •Avoiding

   extra markup
9. 9.

   Bad habits? •Classitis—using too many classes •Grid systems •Extra markup

   •‘Insemantic’ class names
10. 10.

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

11. 11.

    None
12. 12.

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

13. 13.

    Maintainability

14. 14.

    Flexibility

15. 15.

    body > div:nth-of-type(2) > article:first- child > p:first-child{ font-size:1.2em }

    <p>Lorem ipsum dolor sit amet...</p>
16. 16.

    Be ?#*@ing explicit!

17. 17.

    .intro{ font-size:1.2em; } <p class=intro>Lorem ipsum dolor sit amet...</p>

18. 18.

    Specific !== explicit

19. 19.

    Extensibility

20. 20.

    Extensible •Stop thinking in pages… •…think in components… •…then think

    in abstractions.
21. 21.

    Predictability

22. 22.

    Expect the unexpected Always build like your client’s CMS is

    a bulldozer…
23. 23.

    None
24. 24.

    CSS selectors

25. 25.

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

26. 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.
27. 27.

    Classes •No one uses classes except browsers and other developers

    (and microformats). •Classes are neither semantic or insemantic; they’re sensible or insensible.
28. 28.

    None
29. 29.

    .red .red{ color:red; } <h1>I am a <span class=red>designer</span> and

    <span class=red>developer</span></h1>
30. 30.

    .red .red{ color:blue; /* WTF */ } <h1>I am a

    <span class=red>designer</span> and <span class=red>developer</span></h1>
31. 31.

    .brand .brand{ color:#BADA55; /* FTW */ } <h1>I am a

    <span class=brand>designer</span> and <span class=brand>developer</span></h1>
32. 32.

    None
33. 33.

    Objects and abstractions

34. 34.

    The media object bit.ly/cCY3Ew

35. 35.

    The media object bit.ly/cCY3Ew

36. 36.

    The media object bit.ly/cCY3Ew

37. 37.

    The media object bit.ly/cCY3Ew

38. 38.

    The media object bit.ly/cCY3Ew <div class=media> <img class=img> <p class=body>Lorem

    ipsum...</p> </div> .media,.body { overflow:hidden; } .img { float:left; margin-right:20px; } .img img { display:block; }
39. 39.

    The media object bit.ly/cCY3Ew <div class=media> <img class=img> <div class=body>

    <p>Lorem ipsum...</p> <a href>Read more...</a> </div> </div>
40. 40.

    None
41. 41.

    Nicole Sullivan @stubbornella

42. 42.

    The nav abstraction bit.ly/oD2M9n

43. 43.

    .nav{ list-style:none; margin-left:0; } .nav li{ display:inline; } .nav a{

    display:inline-block; } The nav abstraction bit.ly/oD2M9n
44. 44.

    <ol class="nav breadcrumb">...</ol> .breadcrumb li:before{ content:"» "; } .breadcrumb li:first-child:before{

    content:""; } Breadcrumbs…? bit.ly/oD2M9n
45. 45.

    The island object bit.ly/oqQ7JJ

46. 46.

    The island object bit.ly/oqQ7JJ <div class=island>...</div> .island{ padding:1.5em; } .island

    > :last-child{ margin-bottom:0; }
47. 47.

    The island object bit.ly/oqQ7JJ <div class="island promo">...</div> .island.promo{ color:#fff; background-color:#C0FFEE;

    }
48. 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:; }
49. 49.

    Double stranded heading hierarchy <div class=twitter> <h3 class=delta>Recent tweets</h3> ...

    </div>
50. 50.

    None
51. 51.

    Grid systems

52. 52.

    None
53. 53.

    Abstract layout into its own layer Keep components free of

    dimensions
54. 54.

    csswizardry.com/fluid-grids

55. 55.

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

56. 56.

    None
57. 57.

    All together now!

58. 58.

    None
59. 59.

    None
60. 60.

    None
61. 61.

    None
62. 62.

    None
63. 63.

    None
64. 64.

    None
65. 65.

    None
66. 66.

    None
67. 67.

    None
68. 68.

    Benefits and side- effects •Sites are faster to build… •…more

    robust •…more maintainable •…more consistent •…and incidentally more efficient.
69. 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
70. 70.

    Now what? •Solve problems for the right people. •Keep yourselves

    happy and sane. •Learn when enough is enough; cut yourself some slack.
71. 71.

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

72. 72.

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

    – @stubbornella