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. smacss your up

  2. @minamarkham

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

    two days”
  5. None
  6. CSS is easy.

  7. CSS is easy. hard

  8. None
  9. None
  10. CSS is bullshit.

  11. Modular CSS

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

    can help break complex page layouts into reusable solutions.” “ - Dave Rupert
  13. None
  14. None
  15. small pieces independent portable

  16. Navigation, Tabs, Tables, Accordions, Lists, Dropdowns Pagination, Buttons, Labels, Inputs,

    Breadcrumbs, etc.
  17. “Tiny Bootstraps”

  18. None
  19. Module, Pattern, Component, etc.

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

  21. SMACSS

  22. Scalable & Modular Architecture for CSS

  23. None
  24. Framework

  25. categorization naming conventions depth of applicability

  26. Categorization

  27. base layout modules states themes

  28. Base CSS resets, default styles (ex. html, body, h1, ul,

    etc)
  29. Layout grid, major components ex. header, sidebar, nav

  30. content footer header

  31. sidebar header main content

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

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

  34. States module in various states

  35. None
  36. None
  37. Themes module in various contexts

  38. jessicahische.is

  39. Naming Conventions

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

  41. Layout .layout-*, .l-*

  42. Module .<name>

  43. Module .button

  44. Sub-module .<name>-<state>

  45. Sub-module .button-secondary

  46. State .is-*

  47. Theme .theme-*

  48. Theme .theme-*

  49. Depth of Applicability

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

    > ul > li > ul li:hover > a {…}
  51. 10 generations!

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

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

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

    > ul > li > ul li:hover > a {…}
  55. .nav-subitem

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

  57. .nav-subitem > a

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

  59. child selectors class selectors naming conventions

  60. Recap

  61. categorize css rules meaningful names shallow selectors

  62. add some

  63. not SASS

  64. Namespacing

  65. the almighty ampersand

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

  67. .btn:hover {…}

  68. .btn { form & {…} }

  69. form .btn {…}

  70. &- or &_

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

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

  73. nesting

  74. inception rule

  75. < 3 levels deep

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

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

  78. .btn {…} .btn-large {…} ! <div class=“btn btn-large”>

  79. @extend all the things!

  80. .btn {…} .btn-large {@extend .btn;} ! <div class=“btn-large”>

  81. %btn {…} .btn-large {@extend %btn;} ! <div class=“btn-large”>

  82. don’t @extend between modules

  83. File Structure

  84. @import

  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.
  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  
  87. @import  ‘normalize';   @import  'base'; base/_index.scss CSS resets, Normalize, element

    styles 01.  Utilities   02.  Libraries   03.  Base  
  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  
  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  
  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  
  91. utilities/_fonts.scss Web fonts imports & declarations 01.  Utilities   02.

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

     Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face   08.  Print  
  93. !important

  94. None
  95. shame.css

  96. _shame.scss

  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
  98. small and readable

  99. mina.so/sassyStarter

  100. Theming

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

    }
  102. $theme: rebeccapurple

  103. @include theme($rebeccapurple)

  104. None
  105. refactor all the things!

  106. None
  107. refactor all the things?

  108. Baby steps

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

  110. mina.so/smacss-menu

  111. Before: 161 lines After: 97 lines

  112. Recap

  113. namespace with ampersands & @extends break modules into partials refactor

    in chunks
  114. Resources

  115. smacss.com

  116. sass-lang.com

  117. sassmeister.com

  118. thanks! mina.so/smacss @minamarkham