Save 37% off PRO during our Black Friday Sale! »

Your nesting is harmful – on abusing a preprocessor's feature

Your nesting is harmful – on abusing a preprocessor's feature

It’s not the preprocessor which produces bad code, it’s the developer using it the wrong way. Nesting is one of the features which, when misused, produces hard to read, and even harder to maintain code. I will show you a few pitfalls of selector nesting and how to avoid them.

E35264650081105b4ff08f876c377fa7?s=128

Kevin Lorenz

May 18, 2015
Tweet

Transcript

  1. KEVIN LORENZ @VERPIXELT KEVINLORENZ.COM

  2. YOUR NESTING IS HARMFUL | ABUSING A PREPROCESSOR’S FEATURE

  3. .CSS CASCADING STYLE SHEETS

  4. CONTENT PRESENTATION

  5. .SASS SYNTACTICALLY AWESOME

  6. | @IMPORT | VARIABLES | MIXINS | NESTING

  7. NESTING | FEATURE

  8. PITFALLS | SASS NESTING

  9. PITFALL | N°1 – KNOWLEDGE

  10. None
  11. SOLUTION | N°1 – KNOWLEDGE

  12. | CODE REVIEWS | PAIR PROGRAMMING | SET LIMITS |

    TEACH | THINK TWICE | DON’T GET LOST
  13. PITFALL | N°2 – LOSING SIGHT

  14. SOLUTION | N°2 – LOSING SIGHT

  15. ⌥+⌘+2

  16. PITFALL | N°3 – CHAINING

  17. STRUCTURE | VISUALISATION

  18. None
  19. None
  20. None
  21. COMPLEXITY | LAYER

  22. SOLUTION | N°3 – CHANING

  23. BEM SMACSS

  24. PITFALL | N°4 – PARENT SELECTOR

  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. SOLUTION | N°4 – PARENT SELECTOR

  33. PITFALL | N°5 – NESTED PROPERTIES

  34. None
  35. SOLUTION | N°5 – NESTED PROPERTIES

  36. CONCLUSION | AGAIN, SAY WHAT?

  37. | THINK TWICE | KEEP ONE EYE ON THE CSS

    | DON’T GET LOST
  38. TOOLS ARE NEVER A SUBSTITUTE FOR GOOD ARCHITECTURE. MILLER H.

    BORGES MEDEIROS
  39. KEVIN LORENZ @VERPIXELT KEVINLORENZ.COM

  40. | CSSCLASSES.CSSCONF.EU | CSSCONF.EU/CALL-FOR-SPEAKERS | EN.BEM.INFO | SMACSS.COM | OOCSS.ORG