Defensive Sass - Modular styles for the modern web

Slides for a talk on modular Sass I gave at BlendConf, September 2013.

Articles about Modular CSS: http://thesassway.com/modular-css
CodePen examples here: http://codepen.io/collection/lmkqe
BlendConf: http://blendconf.com

Transcript

1. SASS!! Defensive Modular styles for the modern web @johnwlong • BlendConf 2013
2. Help & Feedback http://uservoice.com/touchpoint-toolkit
3. TheSassWay Latest news on Sass + Compass @
4. SMACSS smacss.com BEM bem.info OOCSS oocss.org
5. MODULAR CSS An example
6. Simple Menu
7. ul.menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; > li { display: inline-block; position: relative; > a { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } > ul { @include box-shadow(rgba(black, 0.5) @include border-radius(3px); @include border-top-left-radius(0); display: none; position: absolute; <ul class="menubar"> <li> <a href="#">File</a> <ul> <li><a href="#">Open</a></li> <li><a href="#">Save</a></li> <li><a href="#">Save as...</a></li> <li><a href="#">Close</a></li> <li class="separator"></li> <li><a href="#">Exit</a></li> </ul> </li> ... </ul> http://bit.ly/menu-1 1
8. <ul class="menubar"> <li> <a class="menubar-item" href="#">File</a> <ul class="menu" > <li><a class="menu-item" href="#">Open</a></li> <li><a class="menu-item" href="#">Save</a></li> <li><a class="menu-item" href="#">Save as...</a></li> <li><a class="menu-item" href="#">Close</a></li> <li class="menu-separator"></li> <li><a class="menu-item" href="#">Exit</a></li> </ul> </li> ... </ul> .menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; > li { display: inline-block; position: relative; } } .menubar-item { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } .menu { @include box-shadow(rgba(black, 0.5) 0 5 @include border-radius(3px); @include border-top-left-radius(0); 2 http://bit.ly/menu-2
9. <ul class="menubar"> <li class="menubar-item" > <a class="menubar-item-target" href="#">File</a> <ul class="menu" > <li class="menu-item" ><a class="menu-item-target" href="#">Open</a></li> <li class="menu-item" ><a class="menu-item-target" href="#">Save</a></li> <li class="menu-item" ><a class="menu-item-target" href="#">Save as...</a></li> <li class="menu-item" ><a class="menu-item-target" href="#">Close</a></li> <li class="menu-separator"></li> <li class="menu-item" ><a class= "menu-item-target" href="#">Exit</a></li> </ul> </li> ... </ul> .menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; } .menubar-item { display: inline-block; position: relative; } .menubar-item-target { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } 3 http://bit.ly/menu-3
10. Learn to think in objects. Not selectors.
11. Parent-Child Parent .tableview Child .tableview-item Grandchild .tableview-item-cell
12. TableView
13. <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
14. <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
15. <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
16. Plural-Parent Pattern Parent .faqs Child .faq Grandchild .faq-title
17. Use the parent-child pattern: (Don’t enforce it.) Declare hierarchy.
18. Subclassing Object .button .item Subclass .dropdown-button .ticket-item Child .ticket-title
19. .button { ... } .next-button { ... } .previous-button { ... } .dropdown-button { ... } .select-button { ... } <button class="button">Button</button> <button class="button back-button">Back</button> <button class="button next-button">Next</button> <button class="button dropdown-button">Dropdown</button> <button class="button select-button">Select</button> http://bit.ly/modular-subclassing Buttons
20. Subclassing with @extend .button { ... } .dropdown-button { @extend .button; } <div class=“dropdown-button”>...</div> .button { ... } .dropdown-button { ... } <button class=“button dropdown-button”>...</button> Standard CSS Extending Two classes One class
21. Use subclasses to declare inheritance. (An object should have the properties of another.)
22. Object .item Contextual .ticket .item .article .item Child .item .title .ticket .item .title Contextual
23. .item { ... } .ticket .item { ... } .ticket .item .title { ... } <div class= “ticket”> <div class= “item”> <h3 class= “title”>...</h3> </div> </div> Contextual
24. .item .item .ticket-item .article-item .ticket .item .article .item .item-title .ticket-item-title .item .title .ticket .item .title Subclassing vs. Contextual
25. Much more modular. Require structured markup. (Can be useful for theming) Subclassing vs. Contextual
26. Structural requirements on markup (At all costs. With a few exceptions.) should be avoided.
27. Modifiers Positive .has-menu Negative .no-border, .no-margin State .is-selected, .is-active Other .primary, .secondary
28. 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!
29. Specific Modifiers .button { &:hover { ... } &.primary { ... } &.secondary { ... } &.small { ... } &.large { ... } &.is-disabled, &[disabled] { ... } } Use nesting & the ampersand operator
30. Use modifiers to (Or state.) Change attributes!
31. Modifiers vs. Subclasses Better for small clearly defined changes. Better for major changes or to declare type-of semantics.
32. Naming conventions 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
33. Modular Typography
34. Modular Typography http://bit.ly/modular-typography
35. .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 Modular Typography
36. .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 Modular Typography
37. (Use modifiers for one-offs.) Scope typography with a single class.
38. Reset
39. It’s easy @import “compass”; @include global-reset;
40. Reset vs. Normalize Zeros out styles on all elements. Normalizes styles across browsers so that all browsers share a similar stylesheet.
41. markup independence. A global reset gives true (And is therefore best, IMHO.)
42. What about SASS?
43. MODULAR SASS Well written is just good CSS.
44. Structuring a Sass project http://bit.ly/structure-a-sass-project partials/ |-- _alerts.scss # Pluralize partials. |-- _buttons.scss |-- _checkboxes.scss # Include: object, |-- _choices.scss # subclasses, & modifiers |-- _countdowns.scss |-- _forms.scss |-- _icons.scss ...
45. Closing Thoughts
46. IDs or tags. Don’t style with (Simple class-based selectors are better.)
47. Contextual styles are (Avoid nesting like the plague.) mostly evil!!
48. MoarRR markup. (Turns out it’s much easier to maintain.) Less styles and
49. Minimizing Dependencies. Modularity is mostly about (For reusable code.)
50. SMACSS smacss.com BEM bem.info OOCSS oocss.org TheSassWay @ thesassway.com
51. Thanks! http://codepen.io/collection/lmkqe http://bit.ly/defensive-sass-sept-2013 Modular CSS examples: Presentation: