A Modern Sass Architecture

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