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

Modular CSS & Sass

Ken Collins
October 29, 2014

Modular CSS & Sass

* Why bother with a Modular CSS pattern? - Talk about CSS performance, extensibility, selector specificity, theming, etc.
* Why we chose SUIT vs. BEM or SMACSS. What does SUIT offer us?
* How does modular CSS play with Sass? - Discuss the latest Sass features that make authoring modular CSS fun and easy. We want to share where the patterns have worked and in some cases have broken down and led to other clean solutions.

Ken Collins

October 29, 2014
Tweet

More Decks by Ken Collins

Other Decks in Technology

Transcript

  1. Bootstrapping A Strong Foundation
    Modular CSS & Sass
    1
    Happy Clouds

    View full-size slide

  2. 6
    CSS
    for you
    And Others

    View full-size slide

  3. 7
    Methodology

    View full-size slide

  4. 8
    SUIT vs. BEM

    View full-size slide

  5. 12
    Component
    Modularity
    Realize A Specific UI

    View full-size slide

  6. 13
    No Outer
    Render Context
    Composable

    View full-size slide

  7. 14
    Your Context
    1
    REM
    1.5 REM

    View full-size slide

  8. 15
    Loose
    Coupling
    Isolation vs. Code Repetition

    View full-size slide

  9. 16
    Small
    Components
    Well Documented

    View full-size slide

  10. 18
    Specificity

    View full-size slide

  11. 24
    SUIT Intro

    View full-size slide

  12. 31
    http://stylebitz.customink.com/style_bitz/sass#suit-up

    View full-size slide

  13. 32
    http://stylebitz.customink.com/style_bitz/sass#suit-up

    View full-size slide

  14. 33
    http://stylebitz.customink.com/style_bitz/sass#suit-up

    View full-size slide

  15. 34
    The Details

    View full-size slide

  16. 36
    Descendant
    Pain
    To Many Children

    View full-size slide

  17. 40
    Component
    Inception
    Use Wrappers

    View full-size slide

  18. 43
    File
    Workflow
    Base, Desc, Mod [Desc]

    View full-size slide

  19. 45
    Refactoring
    FTW
    Copy Paste Programming

    View full-size slide

  20. 48
    Wrapping Up

    View full-size slide

  21. http://stylebitz.customink.com/style_bitz/rails#demo-pages
    Demo HTML & Sass
    49

    View full-size slide

  22. @extend %your-skills;
    THANK YOU!
    52

    View full-size slide