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. Focusing on creating healthy front-end modules instead of complete pages

    can help break complex page layouts into reusable solutions.” “ - Dave Rupert
  2. header#top-menu > nav > ul > li a + div

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

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

    > ul > li > ul li:hover > a {…}
  5. 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.
  6. @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  
  7. @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  
  8. @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  
  9. @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  
  10. utilities/_fonts.scss Web fonts imports & declarations 01.  Utilities   02.

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

     Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face   08.  Print  
  12. 01.  Utilities   02.  Libraries   03.  Base   04.

     Layout   05.  Modules   06.  States   07.  @font-­‐face   08.  Print   09.  Shame _shame.scss because hacks happen