Think CSS

Re-evaluating some CSS best practices by looking back through the history of how we've thought about CSS

Transcript

1. Think CSS @edwardoriordan
2. Easy CSS Why even think CSS?
3. html { make-it-look-like-the-psd: 'yes-please'; }
4. ::root { var-nav-start: 45vmin; } body:not(:-moz-handler-blocked) nav:after { flex-basis: var(nav-start); }
5. header {
   border-color: red;
   }
6. Pieces of cake | DevDays Dublin
7. Easy — Old French aise, from the Latin adjacens - ‘lying close by’
8. “It is the nature of CSS to devolve into madness” Chris Eppstein | @chriseppstein
9. Respect CSS
10. Fledgling CSS
11. <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"><tr> <td width="20%" valign="top" bgcolor="#999f8e"><a href="#">Menu link</a><br><a href="#">Menu link</ a><br></td><td width="80%" valign="top" bgcolor="#d2d8c7"><h1>Website Logo</ h1><p>Lorem...</p></td></tr></table>
12. <h1>Heading</h1> <p class="status">You are here</p> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>
13. CSS Zen Garden
14. “To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.” Dave Shea | CSS Zen Garden
15. “There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.” whatwg.org - Elements spec
16. “Classitis and divitis are like the unnecessary notes an amateur musician plays—the noodling of a high school guitarist when he's supposed to be providing backup to a singer or featured soloist. Classitis and divitis are like the needless adjectives with which bad writing is strewn.” Jeffrey Zeldman | Designing with Web Standards
17. Clear CSS?
18. “To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.” Dave Shea | CSS Zen Garden
19. “There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.” whatwg.org - Elements spec
20. “Classitis and divitis are like the unnecessary notes an amateur musician plays—the noodling of a high school guitarist when he's supposed to be providing backup to a singer or featured soloist. Classitis and divitis are like the needless adjectives with which bad writing is strewn.” Jeffrey Zeldman | Designing with Web Standards
21. “I saw the best minds of my generation destroyed by madness, starving hysterical naked...burning for the ancient heavenly connection to the starry dynamo in the machinery of night” Allen Ginsberg | Howl
22. nav ul li.facebook {
    background: url(facebook.png);
    }
    nav ul li.twitter {
    background: url(twitter.png);
    }
    nav ul li.youtube {
    background: url(youtube.png);
    }
23. nav ul li:nth-child(1) {
    background: url(facebook.png);
    }
    nav ul li:nth-child(2) {
    background: url(twitter.png);
    }
    nav ul li:nth-child(3) {
    background: url(youtube.png);
    }
24. Simple CSS
25. Simple — from Latin simplus…originally referred to a medicine made from one constituent.
26. Simple CSS Selectors
27. aside ul { border-bottom: 1px; } aside h3 { color: #333; }
28. .sidebar-nav { border-bottom: 1px; } .sidebar-title { color: #333; }
29. nav li.highlighted {
    color: #333;
    }
    aside h3.highlighted {
    color: #999;
    }
30. .navItem__highlighted {
    color: #333;
    }
    .sidebarHeading__highlighted {
    color: #999;
    }
31. Simple CSS Attributes
32. nav li a { text-decoration: none; color: inherit; border-radius: 5px; background-color: #ddd; float: left; width: 20%; }
33. nav li a { /* reset */ text-decoration: none; color: inherit; } nav li a { /* layout */ float: left; width: 20%; } nav li a { /* style */ border-radius: 5px; background-color: #ddd; }
34. .navItem__link { /* reset */ text-decoration: none; color: inherit; } .navItem__link { /* layout */ float: left; width: 20%; } .navItem__link { /* style */ @include border-radius(5px); background-color: #ddd; }
35. %reset-link-style { ...} %nav-item-theme { ...} .nav li a { @extend %reset-link-style; /* reset */
    @extend %nav-item-theme; /* theme */ @include columns(1-of-4); /* layout */ }
36. Don't throw the past away You might need it some rainy day Dreams can come true again When everything old is new again Peter Allen | Everything Old Is New Again
37. Thanks ♡
38. ❦ Simple Made Easy — Rich Hickey About HTML semantics & front-end architecture — Nicolas Gallagher