Defensive Sass - Modular styles for the modern web

Slides for a talk on modular Sass I gave at Function Pink, April 2013.

CodePen examples here: http://codepen.io/collection/lmkqe
Function Pink: http://www.functionpink.com
The Sass Way: http://thesassway.com

Transcript

1. Defensive Sass Modular styles for the modern web @johnwlong Function Pink, April 2013
2. Help & Feedback http://uservoice.com/touchpoint-toolkit
3. TheSassWay Latest news on Sass + Compass @ B
4. An Example
5. Simple Menu
6. 1 http://bit.ly/menu-1
7. 2 http://bit.ly/menu-2
8. 3 http://bit.ly/menu-3
9. Think in terms of objects. Don’t think in terms of selectors. b
10. Parent-Child Parent .tableview Child .tableview-item Grandchild .tableview-item-cell
11. TableView
12. <ul class="tableview"> <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell icon-large icon-cogs"></i> <span class="tableview-item-cell h3">General</span> </a> </li> ... </ul> http://bit.ly/modular-tableview
13. <ul class="tableview"> ... <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell icon-large icon-signal"></i> <span class="tableview-item-cell h3">Wi-Fi</span> <span class="tableview-item-cell text-right quiet">John's Airport</span> </a> </li> ... </ul> http://bit.ly/modular-tableview
14. <ul class="tableview"> <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell icon-large icon-plane"></i> <span class="tableview-item-cell h3">Airplane Mode</span> <span class="tableview-item-cell text-right"> <select><option>On</option><option selected>Off</option></select> </span> </a> </li> ... </ul> http://bit.ly/modular-tableview
15. Plural Parent Pattern Parent .faqs Child .faq Grandchild .faq-title
16. Parent-Child Used to declare (not enforce) object hierarchy for the DOM. b b b
17. Subclassing Object .item Subclass .ticket-item .article-item Child .item-title .ticket-item-title
18. Subclassing .item { ... } .ticket-item { @extend .item; } <div class= “ticket-item”>...</div> .item { ... } .ticket-item { ... } <div class= “item ticket-item”>...</div> Standard CSS Extending Two classes One class
19. Subclasses Used to declare that one object should inherit the properties of another. b b
20. Contextual Object .item Contextual .ticket .item .article .item Child .item .title .ticket .item .title
21. Contextual .item { ... } .ticket .item { ... } .ticket .item .title { ... } <div class= “ticket”> <div class= “item”> <h3 class= “title”>...</h3> </div> </div>
22. Subclassing vs. Contextual .item .item .ticket-item .article-item .ticket .item .article .item .item-title .ticket-item-title .item .title .ticket .item .title
23. Subclassing vs. Contextual Better for more modular design Sometimes better for things like themes
24. Subclassing vs. Contextual Subclassing is almost always better.
25. Modifiers Positive .has-menu Negative .no-border, .no-margin State .is-selected, .is-active Other .primary, .secondary
26. Generic Modifiers .is-selected { background: $highlight-color; } .is-hidden { display: none !important; } .float-left { float: left !important; } .float-right { float: right !important; } .mt0 { margin-top: 0 !important; } .ml0 { margin-left: 0 !important; } .ma0 { margin: 0 !important; } .clearfix { @include clearfix; } Important!
27. Specific Modifiers .button { &:hover { ... } &.primary { ... } &.secondary { ... } &.small { ... } &.large { ... } &.is-disabled, &[disabled] { ... } } Use nesting & the ampersand operator
28. Modifiers Used to change attributes or state on an existing object. b
29. Modifiers vs. Subclasses Better for small changes in visual attributes or state Better for major visual changes or for highly specific layout
30. Naming Scheme Object .tableview .ticket .noun Child .tableview-item .ticket-title .noun-noun Subclass .multiselect-tableview .priority-ticket .adjective-noun Modifier .is-selected .scrollable .prefix-adjective or .adjective
31. Modular Typography
32. Modular Typography http://bit.ly/modular-typography
33. Modular Typography .h1, .h2, .h3, .h4, .h5, .h6 { ... } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .quiet { color: $quiet-color !important; } .loud { color: $loud-color !important; } .fixed { font-family: $fixed-font-family; } http://bit.ly/modular-typography
34. Modular Typography .typeset { h1 { @extend .h1; margin: 1em 0 0.5em; } h2 { @extend .h2; margin: 1em 0 0.5em; } h3 { @extend .h3; margin: 1em 0 0.5em; } p, ul, ol, pre { margin: 1em 0; } ul { list-style: disc; ... } pre, code { @extend .fixed; } ... } http://bit.ly/modular-typography
35. Modular Typography Scope general typography with a single class name. Use modifiers for one-offs. a
36. Reset
37. It’s easy @import “compass”; @include global-reset;
38. Reset vs. Normalize Zeros out styles on all elements. Normalizes styles across browsers so that all browsers share a similar stylesheet.
39. Reset vs. Normalize Reset is better because it allows you to use tags for semantic value instead of style.
40. Some surprises
41. IDs or tags Don’t style with (classes are better)
42. Contextual styles are mostly evil (avoid nesting)
43. More markup and less styles (Often much easier to maintain)
44. • SMACSS: http://smacss.com • Object Oriented CSS: http://github.com/stubbornella/oocss • Typeset: http://joshuarudd.github.io/typeset.css/ • The Sass Way: http://thesassway.com i See also
45. Thanks! http://bit.ly/defensive-sass-april-2013 http://codepen.io/collection/lmkqe