Defensive Sass - Modular styles for the modern web

A204ca511ddee820957e715d6d363548?s=47 John W. Long
September 07, 2013

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

A204ca511ddee820957e715d6d363548?s=128

John W. Long

September 07, 2013
Tweet

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: