CSS for grown ups: maturing best practises, SXSW 2012

NB: Slides may not make sense without the actual talk.

Transcript

1. GROWNUPS Andy Hume MATURING BEST PRACTISES SXSW interactive, 2012 CSS FOR Saturday, 10 March 2012
2. Front-enders shouldn't be a aid to say they "program". CSS is cons aint programming and not respec ng JS in 2011 is just iggnant [sic]. Alex Russell https://twitter.com/slightlylate/status/141681624134844416 Saturday, 10 March 2012
3. BEGINNING IN THE Saturday, 10 March 2012
4. Web Standards movement http://www.flickr.com/photos/mariachily/4149054961/ Saturday, 10 March 2012
5. <table> <tr><td><img src="spacer.gif"><img src="spacer.gif"></td></tr> <tr><td><font face="arial,sans-serif" size="4" color="red"><b>Error</ font><br><br></b></td></tr> <tr><td><img src="spacer.gif"></td></ tr> </table> Saturday, 10 March 2012
6. <p class="error">Error</p> Saturday, 10 March 2012
7. http://www.csszengarden.com Separation of concerns The power of CSS Saturday, 10 March 2012
8. Web Standards Obsession Saturday, 10 March 2012
9. Every me you need to add a class or id for a s le hook, put a pound/dollar in a jar. #malarkeyspro ps Andy Clarke, 2011 https://twitter.com/malarkey/status/70161540254416896 Saturday, 10 March 2012
10. .social li:nth-child(1) { background-image: url(twitter.png); } .social li:nth-child(2) { background-image: url(facebook.png); } .social li:nth-child(3) { background-image: url(linkedin.png); } Saturday, 10 March 2012
11. .social .twitter { background-image: url(twitter.png); } .social .facebook { background-image: url(facebook.png); } .social .linkedin { background-image: url(linkedin.png); } Saturday, 10 March 2012
12. http://www.flickr.com/photos/dippy_duck/2685596185/ Network Effects Managing complexity Saturday, 10 March 2012
13. http://www.flickr.com/photos/dippy_duck/2685596185/ Network Effects Managing complexity .product-list li a { } Saturday, 10 March 2012
14. http://www.flickr.com/photos/dippy_duck/2685596185/ Network Effects Managing complexity .product-list li a { } .product-list li a { display: block; padding: 0.5em 0.23em; color: #54FE87; background-color: #CCC; text-shadow: #6374AB 20px -12px 2px; } Saturday, 10 March 2012
15. http://www.flickr.com/photos/dippy_duck/2685596185/ With great power... Saturday, 10 March 2012
16. http://www.flickr.com/photos/banspy/3843960604/ Constraints are good Saturday, 10 March 2012
17. http://www.flickr.com/photos/banspy/3843960604/ Constraints are good Nobody is really smart enough to program compu rs. Steve McConnell Code Complete 2, Microsoft Press, 2004 Saturday, 10 March 2012
18. #side-bar a { color: green !important; } Saturday, 10 March 2012
19. http://www.flickr.com/photos/banspy/3843960604/ Constraints are good Nobody is really smart enough to s le web pages. Andy Hume SXSWi, 2012 Saturday, 10 March 2012
20. ‘Code quality’ CORRECTNESS PERFORMANCE REUSABILITY TESTABILITY RELIABILITY EXTENSIBILITY WEB 2.0 COMPLIANT Saturday, 10 March 2012
21. http://www.flickr.com/photos/anandham/4499539060/ Optimize for change Saturday, 10 March 2012
22. 261 declarations of Facebook blue http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us 261 declarations of Facebook blue Saturday, 10 March 2012
23. Very few people (only professional designers, it seems) wri s le sheets longer than a hundred lines. Bert Bos, 2008 http://www.w3.org/People/Bos/CSS-variables Saturday, 10 March 2012
24. Sass http://sass-lang.com LESS http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Saturday, 10 March 2012
25. OOCSS http://oocss.org SMACSS http://smacss.com CSS Lint http://csslint.net Saturday, 10 March 2012
26. EXAMPLES Saturday, 10 March 2012
27. Layers of CSS HTML DOCUMENT DOCUMENT Saturday, 10 March 2012
28. Layers of CSS BASE STYLES HTML DOCUMENT DOCUMENT BASE Saturday, 10 March 2012
29. Layers of CSS BASE STYLES MODULE STYLES HTML DOCUMENT DOCUMENT BASE MODULE Saturday, 10 March 2012
30. Layers of CSS BASE STYLES LAYOUT STYLES MODULE STYLES HTML DOCUMENT DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
31. .green { color: green; } Saturday, 10 March 2012
32. .green { color: red; } Saturday, 10 March 2012
33. .promo-box { color: red; background: black; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
34. .promo-box { color: red; background: black; } .promo-box h3 { font-size: 1.2em; text-transform: uppercase; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
35. .promo-box { color: red; background: black; } .promo-box h3, .promo-box h4 { font-size: 1.2em; text-transform: uppercase; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
36. .promo-box { color: red; background: black; } .promo-box .promo-box-h { font-size: 1.2em; text-transform: uppercase; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
37. !! headings Saturday, 10 March 2012
38. h1 { font-size: 3em; } h2 { font-size: 2.3em; } h3 { font-size: 2.1em; } h4 { font-size: 1.8em; } h5 { font-size: 1.3em; } h6 { font-size: 1.1em; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
39. .h1 { font-size: 3em; } .h2 { font-size: 2.3em; } .h3 { font-size: 2.1em; } .h4 { font-size: 1.8em; } .h5 { font-size: 1.3em; } .h6 { font-size: 1.1em; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
40. .h-headline { font-size: 3em; } .h-subheadline { font-size: 2.3em; } .h-byline { font-size: 2.1em; } .h-standfirst { font-size: 1.8em; } .h-related { font-size: 1.3em; } .h-promo { font-size: 1.1em; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
41. !! lists Saturday, 10 March 2012
42. ul.product-list li { } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
43. .product-list li { } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
44. .product-item { } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
45. <ul> <li class="product-item">Prod 1</li> <li class="product-item">Prod 2</li> <li class="product-item">Prod 3</li> <li class="product-item">Prod 4</li> <li class="product-item">Prod 5</li> </ul> Saturday, 10 March 2012
46. <p class="product-item">Prod 1</p> ... <div class="product-item"> <h4 class="product-item-h">Prod 1</h4> <p>Details about product</p> </div> ... <section class="product-item"> <h2 class="product-item-h">Prod 1</h2> <p>Details about product</p> </section> Saturday, 10 March 2012
47. .product-list li, .product-item { } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
48. !! module variants Saturday, 10 March 2012
49. .promo-box { color: red; background: black; } #sidebar .promo-box { background: white; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
50. .promo-box { color: red; background: black; } .promo-box-light { background: white; } <div class="promo-box promo-box-light"></ div> DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
51. .promo-box { color: red; background: black; } .promo-box--light { background: white; } <div class="promo-box promo-box--light"></ div> DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
52. !! page specific styles Saturday, 10 March 2012
53. .promo-box { color: red; background: black; } .product-page .promo-box { color: green; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
54. .promo-box { color: red; background: black; } .product-page .promo-box, .home-page .promo-box, .about-page .promo-box, .tag-page .promo-box { color: green; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
55. .promo-box { color: red; background: black; } .promo-box .promo-box-eco { color: green; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
56. !! media queries Saturday, 10 March 2012
57. .promo-box input[type=text] { display: block; } @media screen and (min-width: 20em) { .promo-box input[type=text] { display: inline; } } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
58. https://fontdeck.com/register Fontdeck forms Saturday, 10 March 2012
59. .promo-box input[type=text] { display: block; } .promo-box @(min-width: 20em) { input[type=text] { display: inline; } } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
60. .promo-box input[type=text] { display: block; } .promo-box @(min-width: 20em) { input[type=text] { display: inline; } } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
61. .promo-box input[type=text] { display: inline; } .promo-box.narrow input[type=text] { display: block; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
62. .promo-box input[type=text] { display: inline; } .promo-box.narrow input[type=text] { display: block; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
63. Selector Queries https://github.com/ahume/selector-queries <div data-squery="max-width:400px=narrow"> <p>Content here</p> </div> Saturday, 10 March 2012
64. Selector Queries https://github.com/ahume/selector-queries <div data-squery="max-width:400px=narrow"> <p>Content here</p> </div> Saturday, 10 March 2012
65. Selector Queries https://github.com/ahume/selector-queries <div data-squery="max-width:400px=narrow"> <p>Content here</p> </div> Saturday, 10 March 2012
66. Selector Queries https://github.com/ahume/selector-queries <div data-squery="max-width:400px=narrow"> <p>Content here</p> </div> Saturday, 10 March 2012
67. Selector Queries https://github.com/ahume/selector-queries var e = document.querySelectorAll(".promo-box"); SelectorQueries.add(e, "min-width", "30em", "wide"); Saturday, 10 March 2012
68. !! presentational class names Saturday, 10 March 2012
69. Surgical layout helpers .margin-top { margin-top: 8px; } .margin-bottom { margin-bottom: 8px; } Saturday, 10 March 2012
70. <div class="promo-box margin-top"> Module content </div> Surgical layout helpers Saturday, 10 March 2012
71. .gutter-left { padding-left: 8px; } .gutter-right { padding-right: 8px; } Surgical layout helpers Saturday, 10 March 2012
72. <div class="gutter-left gutter-right"> <div class="promo-box"> Module content </div> </div> Surgical layout helpers Saturday, 10 March 2012
73. !! extra non-semantic elements Saturday, 10 March 2012
74. Background icons <p class="icon icon-comment">23 Comments</ p> .icon { background-image: url(icons.png); } .icon-comment { background-position: 0 -30px; } Saturday, 10 March 2012
75. Background icons <p><i class="icon icon-comment"></i>23 Comments</p> .icon { background-image: url(icons.png); } .icon-comment { background-position: 0 -30px; } Saturday, 10 March 2012
76. <p><i class="icon icon-comment"></i>23 Comments</p> <a><i class="icon icon-comment"></ i>Comment</a> Saturday, 10 March 2012
77. STYLEGUIDES DOCS Saturday, 10 March 2012
78. BBC Global Experience Language http://www.bbc.co.uk/gel Saturday, 10 March 2012
79. http://twitter.github.com/bootstrap/ Documenting base styles Saturday, 10 March 2012
80. Documenting base styles http://paulrobertlloyd.com/about/styleguide/ Saturday, 10 March 2012
81. Documenting base styles http://paulrobertlloyd.com/about/styleguide/ Saturday, 10 March 2012
82. Documenting layout styles Saturday, 10 March 2012
83. http://www.flickr.com/photos/banspy/3843960604/ Module library Saturday, 10 March 2012
84. http://www.flickr.com/photos/banspy/3843960604/ Module library Saturday, 10 March 2012
85. The benefits Saturday, 10 March 2012
86. Client-side developers http://goo.gl/xq76e Software developers http://goo.gl/Fj9DP Saturday, 10 March 2012
87. Thank-you! http://lanyrd.com/spmqc @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc Saturday, 10 March 2012