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
   

   View Slide

2. View Slide

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

   View Slide

4. What is Sass?
   

   View Slide

5. CSS Sass
   

   View Slide

6. View Slide

7. What are the superpowers
   of Sass ?
   

   View Slide

8. 1. Variables
   

   View Slide

9. 2. Placeholders
   

   View Slide

10. 3. Mixins
    

    View Slide

11. 4. Nesting
    

    View Slide

12. And so much more ...
    

    View Slide

13. How do we write scalable
    and maintainable Sass?
    

    View Slide

14. Think Modular
    Keep it Simple: Break Into files.
    

    View Slide

15. “There’s no such thing as too
    much files. ”
    

    View Slide

16. ● base/
    ● components/
    ● layout/*
    ● pages/
    ● themes/*
    ● helpers/
    ● vendors/*
    ● main.scss
    The 7-1 folder pattern
    

    View Slide

17. Use a Naming Convention
    Recommended: BEM: Block, Elements, Modifier.
    

    View Slide

18. -
    Block__Element--Modifier
    Block
    Element
    

    View Slide

19. Avoid abusive element nesting
    

    View Slide

20. “Stay within two level
    element nesting. Don’t drive
    yourself and others mad”
    

    View Slide

21. Do this instead.
    

    View Slide

22. Name Responsibly
    Fot the greater good
    

    View Slide

23. “Naming things is one of the
    hardest things to do so put
    more thought and effort into
    it”
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

28. Be Lazy
    DRY: Do Not Repeat Yourself
    

    View Slide

29. “Always lookout for repeating
    patterns and use placeholders,
    mixins and directives
    accordingly”
    

    View Slide

30. Using Placeholders.
    

    View Slide

31. Using mixins.
    

    View Slide

32. Using directives
    

    View Slide

33. Isolate Components
    Components should be self sufficient as much as possible
    

    View Slide

34. “Any variables/ mixins/
    function that will only be used
    in a particular component
    should be locally scoped to it”
    

    View Slide

35. Localise Variables/functions/mixins
    

    View Slide

36. Use Comments
    Recklessly, if you wish.
    

    View Slide

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!
    

    View Slide

38. Thank You !
    @_MsLinda
    Link to slides : bit.ly/scalable-and-maintainable-sass
    

    View Slide