Modular CSS & Sass

* Why bother with a Modular CSS pattern? - Talk about CSS performance, extensibility, selector specificity, theming, etc.
* Why we chose SUIT vs. BEM or SMACSS. What does SUIT offer us?
* How does modular CSS play with Sass? - Discuss the latest Sass features that make authoring modular CSS fun and easy. We want to share where the patterns have worked and in some cases have broken down and led to other clean solutions.

Transcript

1. Bootstrapping A Strong Foundation Modular CSS & Sass 1 Happy Clouds
4. 4 Our Goals
6. 6 CSS for you And Others
7. 7 Methodology
8. 8 SUIT vs. BEM
12. 12 Component Modularity Realize A Specific UI
13. 13 No Outer Render Context Composable
14. 14 Your Context 1 REM 1.5 REM
15. 15 Loose Coupling Isolation vs. Code Repetition
16. 16 Small Components Well Documented
18. 18 Specificity
24. 24 SUIT Intro
31. 31 http://stylebitz.customink.com/style_bitz/sass#suit-up
32. 32 http://stylebitz.customink.com/style_bitz/sass#suit-up
33. 33 http://stylebitz.customink.com/style_bitz/sass#suit-up
34. 34 The Details
36. 36 Descendant Pain To Many Children
40. 40 Component Inception Use Wrappers
43. 43 File Workflow Base, Desc, Mod [Desc]
45. 45 Refactoring FTW Copy Paste Programming
48. 48 Wrapping Up
49. http://stylebitz.customink.com/style_bitz/rails#demo-pages Demo HTML & Sass 49
52. @extend %your-skills; THANK YOU! 52