Pro Yearly is on sale from $80 to $50! »

Defensive Sass - Modular styles for the modern web

A204ca511ddee820957e715d6d363548?s=47 John W. Long
April 11, 2013

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

A204ca511ddee820957e715d6d363548?s=128

John W. Long

April 11, 2013
Tweet

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