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

SMACSS Your Sass Up

SMACSS Your Sass Up

I often ask myself these questions: Will this code be easy for the others to edit? Does it scale? Can I forget it and change it later without being lost?

While Scalable and Modular Architecture for CSS (SMACSS) is just one methodology, the principals of modular CSS are applicable to sites large and small. Using a modular approach in tandem with Sass can greatly improve development efficiency and project maintenance. I'll discuss specific techniques, such as selector inheritance and interpolation, that can greatly reduce the amount of code written. Your code will be more portable, making it easier to use code on other projects.

Mina Markham

August 13, 2014
Tweet

More Decks by Mina Markham

Other Decks in Technology

Transcript

  1. smacss
    your up

    View full-size slide

  2. @minamarkham

    View full-size slide

  3. “I need two demo sites”
    “And I need them
    in two days”

    View full-size slide

  4. CSS is easy.

    View full-size slide

  5. CSS is easy.
    hard

    View full-size slide

  6. CSS is bullshit.

    View full-size slide

  7. Focusing on creating healthy
    front-end modules instead of
    complete pages can help
    break complex page layouts
    into reusable solutions.”

    - Dave Rupert

    View full-size slide

  8. small pieces
    independent
    portable

    View full-size slide

  9. Navigation, Tabs, Tables,
    Accordions, Lists, Dropdowns
    Pagination, Buttons, Labels,
    Inputs, Breadcrumbs, etc.

    View full-size slide

  10. “Tiny Bootstraps”

    View full-size slide

  11. Module, Pattern,
    Component, etc.

    View full-size slide

  12. MVCSS, BEM,
    OOCSS, Suit,
    intuit.css

    View full-size slide

  13. Scalable & Modular
    Architecture for CSS

    View full-size slide

  14. categorization
    naming conventions
    depth of applicability

    View full-size slide

  15. Categorization

    View full-size slide

  16. base
    layout
    modules
    states
    themes

    View full-size slide

  17. Base
    CSS resets, default styles
    (ex. html, body, h1, ul, etc)

    View full-size slide

  18. Layout
    grid, major components
    ex. header, sidebar, nav

    View full-size slide

  19. content
    footer
    header

    View full-size slide

  20. sidebar
    header
    main content

    View full-size slide

  21. Modules
    content patterns
    (ex. search-box, navigation, content-box)

    View full-size slide

  22. promo promo promo promo
    hero
    footer-text
    navigation
    link-list

    View full-size slide

  23. States
    module in various states

    View full-size slide

  24. Themes
    module in various contexts

    View full-size slide

  25. jessicahische.is

    View full-size slide

  26. Naming
    Conventions

    View full-size slide

  27. Base
    h1, h2, p, a, etc.

    View full-size slide

  28. Layout
    .layout-*, .l-*

    View full-size slide

  29. Module
    .button

    View full-size slide

  30. Sub-module
    .-

    View full-size slide

  31. Sub-module
    .button-secondary

    View full-size slide

  32. Theme
    .theme-*

    View full-size slide

  33. Theme
    .theme-*

    View full-size slide

  34. Depth of
    Applicability

    View full-size slide

  35. header#top-menu > nav > ul > li a
    + div > ul > li > ul li:hover > a {…}

    View full-size slide

  36. 10 generations!

    View full-size slide

  37. http://specificity.keegan.st/
    Specificity = 0,1,1,11
    , , ,

    View full-size slide

  38. header#top-menu > nav > ul > li a
    + div > ul > li > ul li:hover > a {…}

    View full-size slide

  39. header#top-menu > nav > ul > li a
    + div > ul > li > ul li:hover > a {…}

    View full-size slide

  40. .nav-subitem

    View full-size slide

  41. http://specificity.keegan.st/
    Specificity = 0,0,1,0
    , , ,

    View full-size slide

  42. .nav-subitem > a

    View full-size slide

  43. http://specificity.keegan.st/
    Specificity = 0,0,1,1
    , , ,

    View full-size slide

  44. child selectors
    class selectors
    naming conventions

    View full-size slide

  45. categorize css rules
    meaningful names
    shallow selectors

    View full-size slide

  46. the almighty ampersand

    View full-size slide

  47. .btn {
    &:hover {…}
    }

    View full-size slide

  48. .btn:hover {…}

    View full-size slide

  49. .btn {
    form & {…}
    }

    View full-size slide

  50. form .btn {…}

    View full-size slide

  51. .btn {
    &-secondary {…}
    &_secondary {…}
    }
    .btn

    View full-size slide

  52. .btn-secondary {…}
    .btn_secondary {…}

    View full-size slide

  53. inception rule

    View full-size slide

  54. < 3 levels deep

    View full-size slide

  55. .btn {
    &-secondary {
    &-icon {…}
    }
    }
    secondary
    .btn

    View full-size slide

  56. .btn-secondary {…}
    .btn-secondary-icon {…}

    View full-size slide

  57. .btn {…}
    .btn-large {…}
    !

    View full-size slide

  58. @extend
    all the things!

    View full-size slide

  59. .btn {…}
    .btn-large {@extend .btn;}
    !

    View full-size slide

  60. %btn {…}
    .btn-large {@extend %btn;}
    !

    View full-size slide

  61. don’t @extend
    between modules

    View full-size slide

  62. File Structure

    View full-size slide

  63. 01.  Utilities  
    @import  'global';  
    @import  'functions';  
    @import  'mixins';  
    @import  'helpers';
    utilities/_index.scss
    Variables, mixins, functions, etc.
    Basically anything that doesn’t
    output CSS by itself.

    View full-size slide

  64. @import  "lib/susy";  
    @import  "lib/font-­‐awesome";  
    @import  "lib/pesticide";
    utilities/_lib.scss
    Third-party libraries such
    as Susy, Font Awesome,
    Pesticide, and other
    plugins.
    01.  Utilities  
    02.  Libraries  

    View full-size slide

  65. @import  ‘normalize';  
    @import  'base';
    base/_index.scss
    CSS resets, Normalize,
    element styles
    01.  Utilities  
    02.  Libraries  
    03.  Base  

    View full-size slide

  66. @import  'global';  
    @import  'functions';  
    @import  'mixins';  
    @import  'helpers';
    layout/_index.scss
    Grid styles, major layout
    components (e.g. header, footer,
    sidebar, etc)
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  

    View full-size slide

  67. @import  'btn';  
    @import  'table';  
    @import  'nav';
    modules/_index.scss
    Individual modules, such as
    buttons, navigation, menus, etc.
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  

    View full-size slide

  68. @import  'states';  
    @import  'touch';
    states/_index.scss
    Describe states of being, ex:
    active, collapsed or hidden
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  
    06.  States  

    View full-size slide

  69. utilities/_fonts.scss Web fonts imports & declarations
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  
    06.  States  
    07.  @font-­‐face

    View full-size slide

  70. states/_print.scss Print styles
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  
    06.  States  
    07.  @font-­‐face  
    08.  Print  

    View full-size slide

  71. 01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  
    06.  States  
    07.  @font-­‐face  
    08.  Print  
    09.  Shame
    _shame.scss because hacks happen

    View full-size slide

  72. small and
    readable

    View full-size slide

  73. mina.so/sassyStarter

    View full-size slide

  74. @mixin theme($name) {
    @if $theme == $name {
    @content; } }

    View full-size slide

  75. $theme:
    rebeccapurple

    View full-size slide

  76. @include theme($rebeccapurple)

    View full-size slide

  77. refactor
    all the things!

    View full-size slide

  78. refactor
    all the things?

    View full-size slide

  79. extract components
    create variables
    apply naming conventions
    nest and @extend

    View full-size slide

  80. mina.so/smacss-menu

    View full-size slide

  81. Before: 161 lines
    After: 97 lines

    View full-size slide

  82. namespace with
    ampersands & @extends
    break modules into partials
    refactor in chunks

    View full-size slide

  83. sass-lang.com

    View full-size slide

  84. sassmeister.com

    View full-size slide

  85. thanks!
    mina.so/smacss
    @minamarkham

    View full-size slide