Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Defensive Sass - Modular styles for the modern web

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

John W. Long

September 07, 2013
Tweet

More Decks by John W. Long

Other Decks in Design

Transcript

  1. SASS!!
    Defensive
    Modular styles for
    the modern web
    @johnwlong • BlendConf 2013

    View Slide

  2. Help & Feedback
    http://uservoice.com/touchpoint-toolkit

    View Slide

  3. TheSassWay
    Latest news on Sass + Compass
    @

    View Slide

  4. SMACSS
    smacss.com
    BEM
    bem.info
    OOCSS
    oocss.org

    View Slide

  5. MODULAR CSS
    An example

    View Slide

  6. Simple Menu

    View Slide

  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;


    File

    Open
    Save
    Save as...
    Close

    Exit


    ...

    http://bit.ly/menu-1 1

    View Slide



  8. File

    Open
    Save
    Save as...
    Close

    Exit


    ...

    .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

    View Slide



  9. File

    Open
    Save
    Save as...
    Close

    Exit


    ...

    .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

    View Slide

  10. Learn to think in objects.
    Not selectors.

    View Slide

  11. Parent-Child
    Parent .tableview
    Child .tableview-item
    Grandchild .tableview-item-cell

    View Slide

  12. TableView

    View Slide





  13. General


    ...

    http://bit.ly/modular-tableview

    View Slide


  14. ...



    Wi-Fi
    John's Airport


    ...

    http://bit.ly/modular-tableview

    View Slide





  15. Airplane Mode

    OnOff



    ...

    http://bit.ly/modular-tableview

    View Slide

  16. Plural-Parent Pattern
    Parent .faqs
    Child .faq
    Grandchild .faq-title

    View Slide

  17. Use the parent-child pattern:
    (Don’t enforce it.)
    Declare hierarchy.

    View Slide

  18. Subclassing
    Object
    .button
    .item
    Subclass
    .dropdown-button
    .ticket-item
    Child .ticket-title

    View Slide

  19. .button { ... }
    .next-button { ... }
    .previous-button { ... }
    .dropdown-button { ... }
    .select-button { ... }
    Button
    Back
    Next
    Dropdown
    Select
    http://bit.ly/modular-subclassing
    Buttons

    View Slide

  20. Subclassing with @extend
    .button { ... }
    .dropdown-button { @extend .button; }
    ...
    .button { ... }
    .dropdown-button { ... }
    ...
    Standard CSS
    Extending
    Two classes
    One class

    View Slide

  21. Use subclasses to declare
    inheritance.
    (An object should have the properties of another.)

    View Slide

  22. Object .item
    Contextual
    .ticket .item
    .article .item
    Child
    .item .title
    .ticket .item .title
    Contextual

    View Slide

  23. .item { ... }
    .ticket .item { ... }
    .ticket .item .title { ... }


    ...


    Contextual

    View Slide

  24. .item .item
    .ticket-item
    .article-item
    .ticket .item
    .article .item
    .item-title
    .ticket-item-title
    .item .title
    .ticket .item .title
    Subclassing vs. Contextual

    View Slide

  25. Much more modular.
    Require structured
    markup.
    (Can be useful for
    theming)
    Subclassing vs. Contextual

    View Slide

  26. Structural requirements on markup
    (At all costs. With a few exceptions.)
    should be avoided.

    View Slide

  27. Modifiers
    Positive .has-menu
    Negative .no-border, .no-margin
    State .is-selected, .is-active
    Other .primary, .secondary

    View Slide

  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!

    View Slide

  29. Specific Modifiers
    .button {
    &:hover { ... }
    &.primary { ... }
    &.secondary { ... }
    &.small { ... }
    &.large { ... }
    &.is-disabled, &[disabled] { ... }
    }
    Use nesting &
    the ampersand
    operator

    View Slide

  30. Use modifiers to
    (Or state.)
    Change attributes!

    View Slide

  31. Modifiers vs. Subclasses
    Better for small clearly
    defined changes.
    Better for major changes
    or to declare type-of
    semantics.

    View Slide

  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

    View Slide

  33. Modular
    Typography

    View Slide

  34. Modular Typography
    http://bit.ly/modular-typography

    View Slide

  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

    View Slide

  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

    View Slide

  37. (Use modifiers for one-offs.)
    Scope typography
    with a single class.

    View Slide

  38. Reset

    View Slide

  39. It’s easy
    @import “compass”;
    @include global-reset;

    View Slide

  40. Reset vs. Normalize
    Zeros out styles on all
    elements.
    Normalizes styles across
    browsers so that all
    browsers share a similar
    stylesheet.

    View Slide

  41. markup independence.
    A global reset gives true
    (And is therefore best, IMHO.)

    View Slide

  42. What about SASS?

    View Slide

  43. MODULAR SASS
    Well written
    is just good CSS.

    View Slide

  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
    ...

    View Slide

  45. Closing Thoughts

    View Slide

  46. IDs or tags.
    Don’t style with
    (Simple class-based selectors are better.)

    View Slide

  47. Contextual styles are
    (Avoid nesting like the plague.)
    mostly evil!!

    View Slide

  48. MoarRR markup.
    (Turns out it’s much easier to maintain.)
    Less styles and

    View Slide

  49. Minimizing
    Dependencies.
    Modularity is mostly about
    (For reusable code.)

    View Slide

  50. SMACSS
    smacss.com
    BEM
    bem.info
    OOCSS
    oocss.org
    TheSassWay
    @
    thesassway.com

    View Slide

  51. Thanks!
    http://codepen.io/collection/lmkqe
    http://bit.ly/defensive-sass-sept-2013
    Modular CSS examples:
    Presentation:

    View Slide