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.

Linda Ikechukwu

June 12, 2020
Tweet

More Decks by Linda Ikechukwu

Other Decks in Technology

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