A Modern Sass Architecture

A short talk I gave at the inaugural SassXSW in Bath on MAy 6th 2015

Transcript

1. Modern Architecture
2. yo@sassnews.com
4. stuart.robson@sitepoint.com
25. What is a page?
26. We’re not building mom & pop shops anymore
27. OOCSS
28. BEM
29. SMACSS
30. ITCSS
32. Folders & Files - ageddon
33. 7 folders, to rule them all
35. base/
36. base/ • where you put rudimentary defaults • a reset file • basic typography settings • code for common HTML elements
38. layouts/
39. layouts/ • code that lays out the site • code for the main ‘parts’ of your site • header • footer • main • aside
41. components/
42. components/ • smaller parts of the site • a carousel (if they’re not evil, are they evil?) • accordian • tabs
44. pages/
45. pages/ • for ‘page specific’ code • files named after the ‘page’ e.g. • _front-page.scss
47. themes/
48. themes/ • ‘big sites’ might need slight differences for different states or themes
50. config/
51. config/ • code that doesn’t output CSS • tools and helpers • mixins • variables • functions
53. vendor/
54. vendor/ • a good store for ‘not my code’ • CSS from external libraries • jquery-ui.scss • bootstrap.scss
56. config/
57. |– config/ | |– _variables.scss | |– _functions.scss | |– _mixins.scss | |– _helpers.scss
59. _variables.scss
60. 866 lines of variables
62. // Default Variables // -------------------- $brand-color--primary: #C69; $brand-color--secondary: #699; $brand-color--tertiary: #F2ECE4; ...
63. // Tabs Pattern // ------------------- $tabs-navigation-border-color: $brand-color--secondary; $tabs-navigation-text-color: $brand-color--tertiary; $tabs-main-background-color: $white; ...
66. _shame.scss • somewhere to put something you’re not sure of • should still have comments • should be emptied routinely, and quickly
68. file naming convention _b-reset.scss base files begin with _b- _c-tabs.scss components begin with _c- _l-header.scss layout files begin with _l- _p-contact.scss page files begin with _p- _t-admin.scss theme files begin with _t- _v-neat.scss vendor files begin with _v-
69. @import - irasation
70. // config/ @import "config/_variables"; … // base/ @import "base/_reset"; ... // components/ @import "components/_buttons"; ... // layout/ @import "layout/_navigation"; ... // pages/ @import "pages/_home"; ... // themes/ @import “themes/_logged-in“; ... // vendors/ @import "config/_jquery-ui"; ...
71. How To Write Your Sass?
72. .component { // extends // includes // variables // CSS // parent selector items // media queries }
73. https://speakerdeck.com/onishiweb/taking-the-pain-out-of-refactoring-secwed-march
74. Never go four levels deep
75. http://sass-guidelin.es/
76. Modern Architecture
77. wrapping up • keep your Sass sane • use specific folders for specific elements of a site • refactor when you can • add comments like a mad person