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.

6e7b68aa52dc1244b3dfd3db19e06af2?s=128

Mina Markham

August 13, 2014
Tweet

Transcript

  1. 3.
  2. 5.
  3. 8.
  4. 9.
  5. 12.

    Focusing on creating healthy front-end modules instead of complete pages

    can help break complex page layouts into reusable solutions.” “ - Dave Rupert
  6. 13.
  7. 14.
  8. 18.
  9. 21.
  10. 23.
  11. 24.
  12. 35.
  13. 36.
  14. 50.

    header#top-menu > nav > ul > li a + div

    > ul > li > ul li:hover > a {…}
  15. 53.

    header#top-menu > nav > ul > li a + div

    > ul > li > ul li:hover > a {…}
  16. 54.

    header#top-menu > nav > ul > li a + div

    > ul > li > ul li:hover > a {…}
  17. 60.
  18. 62.
  19. 63.
  20. 70.
  21. 73.
  22. 84.
  23. 85.

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

    @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  
  25. 87.
  26. 88.

    @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  
  27. 89.

    @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  
  28. 90.

    @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  
  29. 91.

    utilities/_fonts.scss Web fonts imports & declarations 01.  Utilities   02.

     Libraries   03.  Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face
  30. 92.

    states/_print.scss Print styles 01.  Utilities   02.  Libraries   03.

     Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face   08.  Print  
  31. 94.
  32. 95.
  33. 97.

    01.  Utilities   02.  Libraries   03.  Base   04.

     Layout   05.  Modules   06.  States   07.  @font-­‐face   08.  Print   09.  Shame _shame.scss because hacks happen
  34. 100.
  35. 104.
  36. 106.
  37. 108.
  38. 112.
  39. 114.
  40. 115.