Breaking Good Habits

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

Video: https://vimeo.com/44773888

Transcript

2. Breaking Good Habits Harry Roberts—@csswizardry
3. Harry who?! •Web designer/developer •Senior UI Developer—BSkyB •@csswizardry •csswizardry.com
4. faavorite.com
5. Necessary explanation of the cheesy, overly- cryptic talk title.
6. Web standards… •A great idea? Definitely! •Well intentioned? You bet! •Ambiguous? Sadly :( •Open to interpretation? Unfortunately…
7. …web standards •Rules? Definitely not!
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?
9. Good habits? •Avoiding classes and IDs •‘Handcrafting’ our CSS •Avoiding extra markup
10. Bad habits? •Classitis—using too many classes •Grid systems •Extra markup •‘Insemantic’ class names
11. We’ve been solving the wrong problems for the wrong people!
13. The 4 ‘-ility’s •Maintainability •Flexibility •Extensibility •Predictability
14. Maintainability
15. Flexibility
16. body > div:nth-of-type(2) > article:first- child > p:first-child{ font-size:1.2em } <p>Lorem ipsum dolor sit amet...</p>
17. Be ?#*@ing explicit!
18. .intro{ font-size:1.2em; } <p class=intro>Lorem ipsum dolor sit amet...</p>
19. Extensibility
20. Extensible •Stop thinking in pages… •…think in components… •…then think in abstractions.
21. Predictability
22. Expect the unexpected Always build like your client’s CMS is a bulldozer…
24. CSS selectors
25. IDs •Don’t use IDs in CSS. •Ever.
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. Classes •No one uses classes except browsers and other developers (and microformats). •Classes are neither semantic or insemantic; they’re sensible or insensible.
28. .red .red{ color:red; } <h1>I am a <span class=red>designer</span> and <span class=red>developer</span></h1>
29. .red .red{ color:blue; /* WTF */ } <h1>I am a <span class=red>designer</span> and <span class=red>developer</span></h1>
30. .brand .brand{ color:#BADA55; /* FTW */ } <h1>I am a <span class=brand>designer</span> and <span class=brand>developer</span></h1>
32. Objects and abstractions
33. The media object bit.ly/cCY3Ew
34. The media object bit.ly/cCY3Ew
35. The media object bit.ly/cCY3Ew
36. The media object bit.ly/cCY3Ew
37. 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; }
38. 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. Nicole Sullivan @stubbornella
41. The nav abstraction bit.ly/oD2M9n
42. .nav{ list-style:none; margin-left:0; } .nav li{ display:inline; } .nav a{ display:inline-block; } The nav abstraction bit.ly/oD2M9n
43. <ol class="nav breadcrumb">...</ol> .breadcrumb li:before{ content:"» "; } .breadcrumb li:first-child:before{ content:""; } Breadcrumbs…? bit.ly/oD2M9n
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
46. Grid systems
48. Abstract layout into its own layer Keep components free of dimensions
49. csswizardry.com/fluid-grids
50. Straighten up! @media(max-width:480px){ .grid{ float:none; clear:both; width:auto; margin:0; } }
52. All together now!
63. Benefits and side-effects •Sites are faster to build… •…more robust •…more maintainable •…more consistent •…and incidentally more efficient.
64. Now what? •Solve problems for the right people. •Keep yourselves happy and sane. •Learn when enough is enough; cut yourself some slack.
65. Breaking Good Habits •Harry Roberts – @csswizardry •csswizardry.com •faavr.it/csswizardry •Nicole Sullivan – @stubbornella