Architecting Scalable and Maintainable Sass

Stylesheets are everywhere on the web and they keep growing. In this talk, we'll explore how to use the Sass precessor, to write stylesheets that are highly maintainable and scalable so the next developer who takes over the project won't have to pull their hair apart in frustration.

Transcript

1. Architecting Scalable and Maintainable Sass. By Linda Ikechukwu
3. Linda Ikechukwu Frontend Developer www.codewithlinda.com @_MsLinda
4. What is Sass?
5. CSS Sass
7. What are the superpowers of Sass ?
8. 1. Variables
9. 2. Placeholders
10. 3. Mixins
11. 4. Nesting
12. And so much more ...
13. How do we write scalable and maintainable Sass?
14. Think Modular Keep it Simple: Break Into files.
15. “There’s no such thing as too much files. ”
16. • base/ • components/ • layout/* • pages/ • themes/* • helpers/ • vendors/* • main.scss The 7-1 folder pattern
17. Use a Naming Convention Recommended: BEM: Block, Elements, Modifier.
18. - Block__Element--Modifier Block Element
19. Avoid abusive element nesting
20. “Stay within two level element nesting. Don’t drive yourself and others mad”
21. Do this instead.
22. Name Responsibly Fot the greater good
23. “Naming things is one of the hardest things to do so put more thought and effort into it”
24. //NOT OKAY .wavy-dropdown-button //OKAY .dropdown-button Tips for naming things! Use fully descriptive words but limit it to two words if possible.
25. //NOT OKAY .wavy-dropdown-button //OKAY .dropdown-button //OKAY //OKAY $red-color $secondary-color Tips for naming things! Use fully descriptive words but limit it to two words if possible. Name things based on their function, not appearance.
26. //NOT OKAY .wavy-dropdown-button //OKAY .dropdown-button //OKAY //OKAY $red-color $secondary-color //NOT OKAY .sample-projects__title //OKAY .sampleProjects__title Tips for naming things! Use fully descriptive words but limit it to two words if possible. Name things based on their function, not appearance. Go camelCased for block level multi word names to avoid extra dashes.
27. //NOT OKAY .wavy-dropdown-button //OKAY .dropdown-button //OKAY //OKAY $red-color $secondary-color //NOT OKAY .sample-projects__title //OKAY .sampleProjects__title Tips for naming things! Use fully descriptive words but limit it to two words if possible. Name things based on their function, not appearance. Go camelCased for block level multi word names to avoid extra dashes. Avoid abbreviations. Exceptions- nav, btn, cta .. //NOT OKAY //OKAY .r-builder .rocketBuilder
28. Be Lazy DRY: Do Not Repeat Yourself
29. “Always lookout for repeating patterns and use placeholders, mixins and directives accordingly”
30. Using Placeholders.
31. Using mixins.
32. Using directives
33. Isolate Components Components should be self sufficient as much as possible
34. “Any variables/ mixins/ function that will only be used in a particular component should be locally scoped to it”
35. Localise Variables/functions/mixins
36. Use Comments Recklessly, if you wish.
37. • Is Sass Worth Learning in 2020 - Tom Ray • Learn Sass in 20 minutes| Sass crash course - Dev Ed • The Official Sass Documentation • BEM 101 - Robin Rendle • Architecture for a Sass Project - Hugo Giraudel • Sass tutorial: A first look at writing more maintainable styles - Ollie • Writing maintainable SCSS - Michael Flores Further Reading!
38. Thank You ! @_MsLinda Link to slides : bit.ly/scalable-and-maintainable-sass