Successfully reported this slideshow.

SMACSS Your Sass Up

9

Share

1 of 118
1 of 118

SMACSS Your Sass Up

9

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

SMACSS Your Sass Up

  1. 1. smacss your up
  2. 2. @minamarkham
  3. 3. “I need two demo sites” “And I need them in two days”
  4. 4. CSS is easy.
  5. 5. hard CSS is easy.
  6. 6. CSS is bullshit.
  7. 7. Modular CSS
  8. 8. Focusing on creating healthy front-end modules instead of complete pages can help break complex page layouts into reusable solutions.” “ - Dave Rupert
  9. 9. small pieces independent portable
  10. 10. Navigation, Tabs, Tables, Accordions, Lists, Dropdowns Pagination, Buttons, Labels, Inputs, Breadcrumbs, etc.
  11. 11. “Tiny Bootstraps”
  12. 12. Module, Pattern, Component, etc.
  13. 13. MVCSS, BEM, OOCSS, Suit, intuit.css
  14. 14. SMACSS
  15. 15. Scalable & Modular Architecture for CSS
  16. 16. Framework
  17. 17. categorization naming conventions depth of applicability
  18. 18. Categorization
  19. 19. base layout modules states themes
  20. 20. Base CSS resets, default styles (ex. html, body, h1, ul, etc)
  21. 21. Layout grid, major components ex. header, sidebar, nav
  22. 22. header content footer
  23. 23. sidebar header main content
  24. 24. Modules content patterns (ex. search-box, navigation, content-box)
  25. 25. navigation hero promo promo promo promo footer-text link-list
  26. 26. States module in various states
  27. 27. Themes module in various contexts
  28. 28. jessicahische.is
  29. 29. Naming Conventions
  30. 30. Base h1, h2, p, a, etc.
  31. 31. Layout .layout-*, .l-*
  32. 32. Module .<name>
  33. 33. Module .button
  34. 34. Sub-module .<name>-<state>
  35. 35. Sub-module .button-secondary
  36. 36. State .is-*
  37. 37. Theme .theme-*
  38. 38. Theme .theme-*
  39. 39. Depth of Applicability
  40. 40. header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}
  41. 41. 10 generations!
  42. 42. http://specificity.keegan.st/ , , , Specificity = 0,1,1,11
  43. 43. header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}
  44. 44. header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}
  45. 45. .nav-subitem
  46. 46. http://specificity.keegan.st/ , , , Specificity = 0,0,1,0
  47. 47. .nav-subitem > a
  48. 48. http://specificity.keegan.st/ , , , Specificity = 0,0,1,1
  49. 49. child selectors class selectors naming conventions
  50. 50. Recap
  51. 51. categorize css rules meaningful names shallow selectors
  52. 52. add some
  53. 53. not SASS
  54. 54. Namespacing
  55. 55. the almighty ampersand
  56. 56. .btn { &:hover {…} }
  57. 57. .btn:hover {…}
  58. 58. .btn { form & {…} }
  59. 59. form .btn {…}
  60. 60. &- or &_
  61. 61. .btn { &-secondary {…} &_secondary {…} }
  62. 62. .btn-secondary {…} .btn_secondary {…}
  63. 63. nesting
  64. 64. inception rule
  65. 65. < 3 levels deep
  66. 66. .btn { &-secondary { &-icon {…} } }
  67. 67. .btn-secondary {…} .btn-secondary-icon {…}
  68. 68. .btn {…} .btn-large {…} ! <div class=“btn btn-large”>
  69. 69. @extend all the things!
  70. 70. .btn {…} .btn-large {@extend .btn;} ! <div class=“btn-large”>
  71. 71. %btn {…} .btn-large {@extend %btn;} ! <div class=“btn-large”>
  72. 72. don’t @extend between modules
  73. 73. File Structure
  74. 74. @import
  75. 75. 01. Utilities utilities/_index.scss @import 'global'; @import 'functions'; @import 'mixins'; @import 'helpers'; Variables, mixins, functions, etc. Basically anything that doesn’t output CSS by itself.
  76. 76. utilities/_lib.scss @import "lib/susy"; @import "lib/font-­‐awesome"; @import "lib/pesticide"; Third-party libraries such as Susy, Font Awesome, Pesticide, and other plugins. 01. Utilities 02. Libraries
  77. 77. base/_index.scss @import ‘normalize'; @import 'base'; CSS resets, Normalize, element styles 01. Utilities 02. Libraries 03. Base
  78. 78. layout/_index.scss @import 'global'; @import 'functions'; @import 'mixins'; @import 'helpers'; Grid styles, major layout components (e.g. header, footer, sidebar, etc) 01. Utilities 02. Libraries 03. Base 04. Layout
  79. 79. modules/_index.scss @import 'btn'; @import 'table'; @import 'nav'; Individual modules, such as buttons, navigation, menus, etc. 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules
  80. 80. states/_index.scss @import 'states'; @import 'touch'; Describe states of being, ex: active, collapsed or hidden 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States
  81. 81. 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States 07. @font-­‐face utilities/_fonts.scss Web fonts imports & declarations
  82. 82. 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States 07. @font-­‐face 08. Print states/_print.scss Print styles
  83. 83. !important
  84. 84. shame.css
  85. 85. _shame.scss
  86. 86. 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States 07. @font-­‐face 08. Print 09. Shame _shame.scss because hacks happen
  87. 87. small and readable
  88. 88. mina.so/sassyStarter
  89. 89. Theming
  90. 90. @mixin theme($name) { @if $theme == $name { @content; } }
  91. 91. $theme: rebeccapurple
  92. 92. @include theme($rebeccapurple)
  93. 93. refactor all the things!
  94. 94. refactor all the things?
  95. 95. Baby steps
  96. 96. extract components create variables apply naming conventions nest and @extend
  97. 97. mina.so/smacss-menu
  98. 98. Before: 161 lines After: 97 lines
  99. 99. Recap
  100. 100. namespace with ampersands & @extends break modules into partials refactor in chunks
  101. 101. Resources
  102. 102. smacss.com
  103. 103. sass-lang.com
  104. 104. sassmeister.com
  105. 105. mina.so/smacss thanks! @minamarkham

×