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.

Transcript

1. smacss your up
2. @minamarkham
4. “I need two demo sites” “And I need them in two days”
6. CSS is easy.
7. CSS is easy. hard
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
15. small pieces independent portable
16. Navigation, Tabs, Tables, Accordions, Lists, Dropdowns Pagination, Buttons, Labels, Inputs, Breadcrumbs, etc.
17. “Tiny Bootstraps”
19. Module, Pattern, Component, etc.
20. MVCSS, BEM, OOCSS, Suit, intuit.css
21. SMACSS
22. Scalable & Modular Architecture for CSS
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
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
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)
105. refactor all the things!
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