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.

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
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
21. COMPLEXITY | LAYER
22. SOLUTION | N°3 – CHANING
23. BEM SMACSS
24. PITFALL | N°4 – PARENT SELECTOR
32. SOLUTION | N°4 – PARENT SELECTOR
33. PITFALL | N°5 – NESTED PROPERTIES
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