Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Architecting Scalable and Maintainable Sass

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.

B12ebc301b41cd08402e95641fd3be46?s=128

Linda Ikechukwu

June 12, 2020
Tweet

Transcript

  1. Architecting Scalable and Maintainable Sass. By Linda Ikechukwu

  2. None
  3. Linda Ikechukwu Frontend Developer www.codewithlinda.com @_MsLinda

  4. What is Sass?

  5. CSS Sass

  6. None
  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