Save 37% off PRO during our Black Friday Sale! »

A Modern Sass Architecture

A Modern Sass Architecture

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

F479fe45ac0f50c0bdbe35c5757986f7?s=128

Stuart Robson

May 06, 2015
Tweet

Transcript

  1. Modern Architecture

  2. yo@sassnews.com

  3. None
  4. stuart.robson@sitepoint.com

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. What is a page?

  26. We’re not building mom & pop shops anymore

  27. OOCSS

  28. BEM

  29. SMACSS

  30. ITCSS

  31. None
  32. Folders & Files - ageddon

  33. 7 folders, to rule them all

  34. None
  35. base/

  36. base/ • where you put rudimentary defaults • a reset

    file • basic typography settings • code for common HTML elements
  37. None
  38. layouts/

  39. layouts/ • code that lays out the site • code

    for the main ‘parts’ of your site • header • footer • main • aside
  40. None
  41. components/

  42. components/ • smaller parts of the site • a carousel

    (if they’re not evil, are they evil?) • accordian • tabs
  43. None
  44. pages/

  45. pages/ • for ‘page specific’ code • files named after

    the ‘page’ e.g. • _front-page.scss
  46. None
  47. themes/

  48. themes/ • ‘big sites’ might need slight differences for different

    states or themes
  49. None
  50. config/

  51. config/ • code that doesn’t output CSS • tools and

    helpers • mixins • variables • functions
  52. None
  53. vendor/

  54. vendor/ • a good store for ‘not my code’ •

    CSS from external libraries • jquery-ui.scss • bootstrap.scss
  55. None
  56. config/

  57. |– config/ | |– _variables.scss | |– _functions.scss | |–

    _mixins.scss | |– _helpers.scss
  58. None
  59. _variables.scss

  60. 866 lines of variables

  61. None
  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; ...
  64. None
  65. None
  66. _shame.scss • somewhere to put something you’re not sure of

    • should still have comments • should be emptied routinely, and quickly
  67. None
  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