Why Your Sass is Bad and You Should Feel Bad

This talk was a collaboration with Ben Bayard, originally presented to the Tech Services team at Moovweb.

Sass makes CSS even easier to write, which means that in fewer keystrokes, a Sass codebase can become a bloated, unreadable mess. These are some basic principles on how to write better Sass (and better underlying CSS) and stop sucking so bad.

Transcript

1. WHY YOUR SASS
   IS BAD
   
2. AND WHY YOU SHOULD FEEL BAD
3. AND WHY YOU SHOULD FEEL BAD
4. And how to make it better
5. Bad Sass causes
   PROBLEMS
6. MAINTENANCE
   (everyone’s favorite) #1
7. LARGE
   CSS OUTPUT #2
8. LOOOOOOOONG PAINT TIMES #3
9. WEB STANDARDS #4 (lack of)
10. So let’s talk about what
    GREAT SASS
    looks like
11. START WITH
    GOOD SELECTORS
12. MEANINGFUL NAMES #ctl00_FPCLogin1_hlnkLogin {} ! .mw-pdp h2 a .text {} ! h2 a {} ! .mw-login-link {} BAD BAD GOOD BAD
13. PHILOSOPHICAL INTERLUDE
14. SYNTACTIC CLASSES or the “many classes” approach
15. .mw-padding {} .mw-large-text {} .mw-bold {}
16. SEMANTIC CLASSES or the “meaningful class” approach
17. .mw-product-tile {} .mw-footer-toggler {} .mw-social-icon {}
18. POWERFUL SASS TECHNIQUES
19. POWERFUL SASS TECHNIQUES AND HOW NOT TO MISUSE THEM
20. NESTING
21. NESTING } } } } } } } } } } } } (You’re a web developer, not a bird. Stop nesting like you’re trying to protect your eggs.)
22. NESTING Don’t nest to emulate the DOM. ! If you’re nesting more than three levels, look at your life. Look at your choices. ! Nest to increase specificity in order to override a style, to expand upon a style, or to style a child class within context.
23. .mw-pink-button { color: white; padding: $spacing; background-color: $light-pink; } Regular flat class .mw-order-form { .mw-pink-button { background-color: $darker-pink; } } Override a style .mw-pink-button { &.small { padding: $spacing/2; } } Expand upon a style .mw-pink-button { .sprites-cool-image { position: absolute; right: 10px; top: 50% } } Style a child in context
24. MIXINS & @include
    
25. @include writes code for you If there’s no parameters, @include is just copying and pasting for you.
26. Mixins are like friendly robots. You should give them more to do than just copypasta.
27. GOOD MIXIN @include border-radius(4px, 4px); generates... -webkit-border-radius: 4px 4px; -moz-border-radius: 4px / 4px; -khtml-border-radius: 4px / 4px; border-radius: 4px / 4px; (Even though the border-radius mixin is deprecated, it’s a good example)
28. @extend the smart way re-use blocks of code.
29. %mw-button { border-radius: 3px; font-family: $font-text; font-size: 12px; font-weight: bold; padding: 0 10px; } ! .mw-button-yellow { @extend %mw-button; border: 1px solid $color-yellow1; @include background(linear-gradient($color-yellow2, $color-yellow1)); color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.2); }
30. PLACEHOLDERS The “%” in %mw-button means “placeholder” Placeholders don’t appear in your CSS, but they add whatever they are extended within to a selector chain. ! This makes it really easy to repeat code in your Sass while keeping your CSS totally DRY.
31. NEXT STEPS! Forthcoming styleguide and formalized procedure based on team discussion ! Experiments with structure and new techniques
32. KEEP AN EYE ON YOUR CODE!