A Modern Sass Artchitecture

--- updated 07/04/16 ---

A romp through some tips, tricks, ideas and methods for creating a modern architecture when writing Sass. Topics include -

Folder and file structure
Naming conventions and methodologies
Creating maintainable variables
Documenting as a start and not an afterthought
How to compose declarations
When to not use Sass

This talk was presented at ASOS's Tech UI Meetup in London on April 6th 2016
(slides created using Deckset on OSX)

Links -

http://alistapart.com/article/responsive-web-design
http://alwaystwisted.com/articles/2013-01-07-structuring-my-sass-101-part-1
http://www.sitepoint.com/architecture-sass-project/
https://github.com/HugoGiraudel/sass-boilerplate
https://github.com/twbs/bootstrap
http://csswizardry.com/2013/04/shame-css/
https://smacss.com/
https://github.com/minamarkham/sassy-starter
http://www.creativebloq.com/web-design/manage-large-scale-web-projects-new-css-architecture-itcss-41514731?page=1
https://github.com/sturobson/BEM-resources
https://github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection
https://github.com/sasstools/sass-lint
https://github.com/brigade/scss-lint
http://www.sitepoint.com/getting-started-with-scss-lint/
http://sassdoc.com/
http://github.com/postcss/autoprefixer
https://github.com/hudochenkov/postcss-sorting
http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/
https://github.com/cuth/postcss-pxtorem

Transcript

1. MODERN SASS ARCHITECTURE 1 — // Modern Sass Architecture - #ASOSTechUI 2016
2. STUART ROBSON FRONT-END DEVELOPER www.alwaystwisted.com 2 — // Modern Sass Architecture - #ASOSTechUI 2016
3. MODERN SASS ARCHITECTURE 3 — // Modern Sass Architecture - #ASOSTechUI 2016
4. MODERN SASS ARCHITECTURE > folder and file structure > naming conventions > composing declarations > maintaining variables > documentation > when not to use Sass 4 — // Modern Sass Architecture - #ASOSTechUI 2016
5. FOLDER AND FILE STRUCTURE 5 — // Modern Sass Architecture - #ASOSTechUI 2016
6. 6 — // Modern Sass Architecture - #ASOSTechUI 2016
7. 7 — // Modern Sass Architecture - #ASOSTechUI 2016
8. 8 — // Modern Sass Architecture - #ASOSTechUI 2016
9. 9 — // Modern Sass Architecture - #ASOSTechUI 2016
10. 10 — // Modern Sass Architecture - #ASOSTechUI 2016
11. 11 — // Modern Sass Architecture - #ASOSTechUI 2016
12. 12 — // Modern Sass Architecture - #ASOSTechUI 2016
13. RESPONSIVE WEB DESIGN 13 — // Modern Sass Architecture - #ASOSTechUI 2016
14. 14 — // Modern Sass Architecture - #ASOSTechUI 2016
15. 15 — // Modern Sass Architecture - #ASOSTechUI 2016
16. 16 — // Modern Sass Architecture - #ASOSTechUI 2016
17. All we had was a single CSS file, longer than a sleepless night. — Hugo Giraudel 17 — // Modern Sass Architecture - #ASOSTechUI 2016
18. SPLITTING OUT OUR CSS 18 — // Modern Sass Architecture - #ASOSTechUI 2016
19. 19 — // Modern Sass Architecture - #ASOSTechUI 2016
20. 20 — // Modern Sass Architecture - #ASOSTechUI 2016
21. 21 — // Modern Sass Architecture - #ASOSTechUI 2016
22. 22 — // Modern Sass Architecture - #ASOSTechUI 2016
23. FILES EVERYWHERE 23 — // Modern Sass Architecture - #ASOSTechUI 2016
24. 24 — // Modern Sass Architecture - #ASOSTechUI 2016
25. 25 — // Modern Sass Architecture - #ASOSTechUI 2016
26. 26 — // Modern Sass Architecture - #ASOSTechUI 2016
27. 27 — // Modern Sass Architecture - #ASOSTechUI 2016
28. 28 — // Modern Sass Architecture - #ASOSTechUI 2016
29. SASS GIVES YOU EXTRA 29 — // Modern Sass Architecture - #ASOSTechUI 2016
30. 30 — // Modern Sass Architecture - #ASOSTechUI 2016
31. 31 — // Modern Sass Architecture - #ASOSTechUI 2016
32. 32 — // Modern Sass Architecture - #ASOSTechUI 2016
33. 33 — // Modern Sass Architecture - #ASOSTechUI 2016
34. 34 — // Modern Sass Architecture - #ASOSTechUI 2016
35. 35 — // Modern Sass Architecture - #ASOSTechUI 2016
36. 36 — // Modern Sass Architecture - #ASOSTechUI 2016
37. 37 — // Modern Sass Architecture - #ASOSTechUI 2016
38. 38 — // Modern Sass Architecture - #ASOSTechUI 2016
39. 39 — // Modern Sass Architecture - #ASOSTechUI 2016
40. 40 — // Modern Sass Architecture - #ASOSTechUI 2016
41. PARTIALS 41 — // Modern Sass Architecture - #ASOSTechUI 2016
42. 42 — // Modern Sass Architecture - #ASOSTechUI 2016
43. 43 — // Modern Sass Architecture - #ASOSTechUI 2016
44. PARTIAL-POCALYPSE 44 — // Modern Sass Architecture - #ASOSTechUI 2016
45. 45 — // Modern Sass Architecture - #ASOSTechUI 2016
46. 46 — // Modern Sass Architecture - #ASOSTechUI 2016
47. 47 — // Modern Sass Architecture - #ASOSTechUI 2016
48. MODERN SASS ARCHITECTURE 48 — // Modern Sass Architecture - #ASOSTechUI 2016
49. A place for everything, and everything in its place — Mrs Beeton 49 — // Modern Sass Architecture - #ASOSTechUI 2016
50. 50 — // Modern Sass Architecture - #ASOSTechUI 2016
51. 7-1 Pattern — Hugo Giraudel 51 — // Modern Sass Architecture - #ASOSTechUI 2016
52. 6-1 FOLDER STRUCTURE 52 — // Modern Sass Architecture - #ASOSTechUI 2016
53. 53 — // Modern Sass Architecture - #ASOSTechUI 2016
54. BASE/ 54 — // Modern Sass Architecture - #ASOSTechUI 2016
55. BASE/ > reset or normalize > typography settings > primitive or atomic defaults > code for common HTML elements 55 — // Modern Sass Architecture - #ASOSTechUI 2016
56. 56 — // Modern Sass Architecture - #ASOSTechUI 2016
57. COMPONENTS/ 57 — // Modern Sass Architecture - #ASOSTechUI 2016
58. COMPONENTS/ > smaller modules of a site > tabs, carousel, accordian 58 — // Modern Sass Architecture - #ASOSTechUI 2016
59. 59 — // Modern Sass Architecture - #ASOSTechUI 2016
60. LAYOUTS/ 60 — // Modern Sass Architecture - #ASOSTechUI 2016
61. LAYOUTS/ > the layout of a site > header, footer, aside, main 61 — // Modern Sass Architecture - #ASOSTechUI 2016
62. 62 — // Modern Sass Architecture - #ASOSTechUI 2016
63. PAGES/ 63 — // Modern Sass Architecture - #ASOSTechUI 2016
64. PAGES/ > the page specific code of a site > Sass files named after the page > _front-page.scss > _contact-page.scss 64 — // Modern Sass Architecture - #ASOSTechUI 2016
65. 65 — // Modern Sass Architecture - #ASOSTechUI 2016
66. VENDOR/ 66 — // Modern Sass Architecture - #ASOSTechUI 2016
67. VENDOR/ > files written by others > external frameworks or libraries 67 — // Modern Sass Architecture - #ASOSTechUI 2016
68. 68 — // Modern Sass Architecture - #ASOSTechUI 2016
69. CONFIG/ 69 — // Modern Sass Architecture - #ASOSTechUI 2016
70. CONFIG/ > Sass code that doesn't compile CSS > tools and helpers > mixins, variables, functions 70 — // Modern Sass Architecture - #ASOSTechUI 2016
71. CONFIG/ |- config/ |-|- _variables.scss |-|- _functions.scss |-|- _mixins.scss |-|- _helpers.scss 71 — // Modern Sass Architecture - #ASOSTechUI 2016
72. _mixins.scss 72 — // Modern Sass Architecture - #ASOSTechUI 2016
73. 73 — // Modern Sass Architecture - #ASOSTechUI 2016
74. _variables.scss 74 — // Modern Sass Architecture - #ASOSTechUI 2016
75. All we had was a single Sass variables file, longer than a sleepless night. — Stu Robson 75 — // Modern Sass Architecture - #ASOSTechUI 2016
76. 634 LINES 76 — // Modern Sass Architecture - #ASOSTechUI 2016
77. 77 — // Modern Sass Architecture - #ASOSTechUI 2016
78. _shame.scss 78 — // Modern Sass Architecture - #ASOSTechUI 2016
79. 79 — // Modern Sass Architecture - #ASOSTechUI 2016
80. 80 — // Modern Sass Architecture - #ASOSTechUI 2016
81. 81 — // Modern Sass Architecture - #ASOSTechUI 2016
82. 82 — // Modern Sass Architecture - #ASOSTechUI 2016
83. 83 — // Modern Sass Architecture - #ASOSTechUI 2016
84. MODERN SASS ARCHITECTURE 84 — // Modern Sass Architecture - #ASOSTechUI 2016
85. NAMING CONVENTIONS 85 — // Modern Sass Architecture - #ASOSTechUI 2016
86. #header-navigation { float: left; } .main-navigation-link { list-style: none; } .main-navigation-signup-link { color: red; } 86 — // Modern Sass Architecture - #ASOSTechUI 2016
87. B.E.M. 87 — // Modern Sass Architecture - #ASOSTechUI 2016
88. B - BLOCK 88 — // Modern Sass Architecture - #ASOSTechUI 2016
89. E - ELEMENT 89 — // Modern Sass Architecture - #ASOSTechUI 2016
90. M - MODIFIER 90 — // Modern Sass Architecture - #ASOSTechUI 2016
91. .block { [...] } .block__element { [...] } .block--modifier { [...] } .block__element--modifier { [...] } 91 — // Modern Sass Architecture - #ASOSTechUI 2016
92. 92 — // Modern Sass Architecture - #ASOSTechUI 2016
93. .nav { float: left; } .nav__link { list-style: none; } .nav__link--signup { color: red; } 93 — // Modern Sass Architecture - #ASOSTechUI 2016
94. 94 — // Modern Sass Architecture - #ASOSTechUI 2016
95. 95 — // Modern Sass Architecture - #ASOSTechUI 2016
96. MODERN SASS ARCHITECTURE 96 — // Modern Sass Architecture - #ASOSTechUI 2016
97. COMPOSING DECLARATIONS 97 — // Modern Sass Architecture - #ASOSTechUI 2016
98. HOW TO WRITE YOUR SASS 98 — // Modern Sass Architecture - #ASOSTechUI 2016
99. HOW TO WRITE YOUR CSS 99 — // Modern Sass Architecture - #ASOSTechUI 2016
100. MAKE THE RULES 100 — // Modern Sass Architecture - #ASOSTechUI 2016
101. > single line or multi-line > ordering alphabetically or type > level of nesting 101 — // Modern Sass Architecture - #ASOSTechUI 2016
102. .component { background-color: #BADA55; border: 1px solid #000; height: 300px; width: 400px; } 102 — // Modern Sass Architecture - #ASOSTechUI 2016
103. .component { background-color: #BADA55; border: 1px solid #000; height: 300px; height: 270px; width: 400px; } 103 — // Modern Sass Architecture - #ASOSTechUI 2016
104. .component { background-color: #BADA55; border: 1px solid #000; height: 300px; width: 400px; .component__title { color: #070707; font-size: 2.4em; .component__title__link { text-decoration: none; } } } 104 — // Modern Sass Architecture - #ASOSTechUI 2016
105. .component { background-color: #BADA55; border: 1px solid #000; height: 300px; width: 400px; } .component__title { color: #070707; font-size: 2.4em; } .component__title__link { text-decoration: none; } 105 — // Modern Sass Architecture - #ASOSTechUI 2016
106. 106 — // Modern Sass Architecture - #ASOSTechUI 2016
107. .component { // variables // extends // mixins // functions // CSS // parent selectors // media queries } 107 — // Modern Sass Architecture - #ASOSTechUI 2016
108. .component { $border-color: $color--alt-1; @include box-sizing(content); border: 1px solid $border-color; &:hover { border: none; } @include mq(768) { font-size: 2em; } } 108 — // Modern Sass Architecture - #ASOSTechUI 2016
109. 109 — // Modern Sass Architecture - #ASOSTechUI 2016
110. CODE QUALITY AND CONSISTENCY 110 — // Modern Sass Architecture - #ASOSTechUI 2016
111. LINTING 111 — // Modern Sass Architecture - #ASOSTechUI 2016
112. 112 — // Modern Sass Architecture - #ASOSTechUI 2016
113. 113 — // Modern Sass Architecture - #ASOSTechUI 2016
114. 114 — // Modern Sass Architecture - #ASOSTechUI 2016
115. MODERN SASS ARCHITECTURE 115 — // Modern Sass Architecture - #ASOSTechUI 2016
116. MAINTAINING VARIABLES 116 — // Modern Sass Architecture - #ASOSTechUI 2016
117. 117 — // Modern Sass Architecture - #ASOSTechUI 2016
118. 634 LINES 118 — // Modern Sass Architecture - #ASOSTechUI 2016
119. 119 — // Modern Sass Architecture - #ASOSTechUI 2016
120. $red-border: #f01e1e; $orange-underline: #EE7600; .component { background-color: $orange-underline; } 120 — // Modern Sass Architecture - #ASOSTechUI 2016
121. $red: #f01e1e; $dark-orange: #EE7600; .component { background-color: $dark-orange; } 121 — // Modern Sass Architecture - #ASOSTechUI 2016
122. $red: #f01e1e; $dark-orange: #EE7600; $brand-color-1: $red; $brand-color-2: $dark-orange; 122 — // Modern Sass Architecture - #ASOSTechUI 2016
123. FOLLOW CLASSES 123 — // Modern Sass Architecture - #ASOSTechUI 2016
124. .border { border-top: 1px solid #f01e1e; } 124 — // Modern Sass Architecture - #ASOSTechUI 2016
125. $red: #f01e1e; .border { border-top: 1px solid $red; } 125 — // Modern Sass Architecture - #ASOSTechUI 2016
126. $red: #f01e1e; $border__color--main: $red; .border { border-top: 1px solid $border__color--main; } 126 — // Modern Sass Architecture - #ASOSTechUI 2016
127. OVER THE TOP 127 — // Modern Sass Architecture - #ASOSTechUI 2016
128. DON'T BE CUTE $text-sizing: ( mercury: ( large: ( font-size: 0.75rem, // 12px line-height: 1.125rem // 18px ) ), venus: ( large: ( font-size: 0.9375rem, // 15px line-height: 1.5rem // 24px ), medium: ( font-size: 0.875rem, // 14px line-height: 1.3125rem // 21px ), fromAdaptiveToFluid: ( font-size: 0.875rem, // 14px line-height: 1.3125rem // 21px ) ) } 128 — // Modern Sass Architecture - #ASOSTechUI 2016
129. MODERN SASS ARCHITECTURE 129 — // Modern Sass Architecture - #ASOSTechUI 2016
130. DOCUMENTATION 130 — // Modern Sass Architecture - #ASOSTechUI 2016
131. I always say, keep a diary and someday it'll keep you. — Mae West 131 — // Modern Sass Architecture - #ASOSTechUI 2016
132. START WITH DOCUMENTATION 132 — // Modern Sass Architecture - #ASOSTechUI 2016
133. 133 — // Modern Sass Architecture - #ASOSTechUI 2016
134. // ==================== .classname ==================== // created by: Stuart Robson ( stu@alwaystwisted.com ) // creation data: October 21, 2015 // upadate by: Stuart Robson ( stu@alwaystwisted.com ) // update data: November 05, 2015 // 1. Your text // =========================================================== 134 — // Modern Sass Architecture - #ASOSTechUI 2016
135. WHAT IT DOES 135 — // Modern Sass Architecture - #ASOSTechUI 2016
136. WHY IT'S NEEDED 136 — // Modern Sass Architecture - #ASOSTechUI 2016
137. WHERE TO USE IT 137 — // Modern Sass Architecture - #ASOSTechUI 2016
138. // ----------------------------------------------------------------- // note: Only use this on the home page. // ----------------------------------------------------------------- 138 — // Modern Sass Architecture - #ASOSTechUI 2016
139. // todo: add support for IE7 139 — // Modern Sass Architecture - #ASOSTechUI 2016
140. README.MD 140 — // Modern Sass Architecture - #ASOSTechUI 2016
141. 141 — // Modern Sass Architecture - #ASOSTechUI 2016
142. 142 — // Modern Sass Architecture - #ASOSTechUI 2016
143. 143 — // Modern Sass Architecture - #ASOSTechUI 2016
144. CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU 144 — // Modern Sass Architecture - #ASOSTechUI 2016
145. MODERN SASS ARCHITECTURE 145 — // Modern Sass Architecture - #ASOSTechUI 2016
146. WHEN NOT TO USE SASS 146 — // Modern Sass Architecture - #ASOSTechUI 2016
147. .component { background-color: #3C3C3C; background-image: -webkit-gradient(linear, left top, right top, from(#3C3C3C), to(#999999)); background-image: -webkit-linear-gradient(left, #3C3C3C, #999999); background-image: linear-gradient(left, #3C3C3C, #999999); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3C3C3C', endColorStr='#999999', gradientType='1'); } 147 — // Modern Sass Architecture - #ASOSTechUI 2016
148. @mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) { background-color: $startColor; background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor)); background-image: -webkit-linear-gradient(left, $startColor, $endColor); background-image: -moz-linear-gradient(left, $startColor, $endColor); background-image: -ms-linear-gradient(left, $startColor, $endColor); background-image: -o-linear-gradient(left, $startColor, $endColor); background-image: linear-gradient(left, $startColor, $endColor); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1'); } 148 — // Modern Sass Architecture - #ASOSTechUI 2016
149. .component { @include background-horizontal; } 149 — // Modern Sass Architecture - #ASOSTechUI 2016
150. 150 — // Modern Sass Architecture - #ASOSTechUI 2016
151. .component { font-size: 16px; font-size: 1rem; } 151 — // Modern Sass Architecture - #ASOSTechUI 2016
152. 152 — // Modern Sass Architecture - #ASOSTechUI 2016
153. IS THAT CODE NEEDED 153 — // Modern Sass Architecture - #ASOSTechUI 2016
154. MODERN SASS ARCHITECTURE > folder and file structure > naming conventions > composing declarations > maintaining variables > documentation > when not to use Sass 154 — // Modern Sass Architecture - #ASOSTechUI 2016
155. CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU 155 — // Modern Sass Architecture - #ASOSTechUI 2016
156. THANKS @STUROBSON WWW.ALWAYSTWISTED.COM 156 — // Modern Sass Architecture - #ASOSTechUI 2016
157. 157 — // Modern Sass Architecture - #ASOSTechUI 2016