Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modular CSS & Sass

F0b14b7dbae1e90259eb946d1c841a17?s=47 Ken Collins
October 29, 2014

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.

F0b14b7dbae1e90259eb946d1c841a17?s=128

Ken Collins

October 29, 2014
Tweet

Transcript

  1. Bootstrapping A Strong Foundation Modular CSS & Sass 1 Happy

    Clouds
  2. 2

  3. 3

  4. 4 Our Goals

  5. 5

  6. 6 CSS for you And Others

  7. 7 Methodology

  8. 8 SUIT vs. BEM

  9. 9

  10. 10

  11. 11

  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

  17. 17

  18. 18 Specificity

  19. 19

  20. 20

  21. 21

  22. 22

  23. 23

  24. 24 SUIT Intro

  25. 25

  26. 26

  27. 27

  28. 28

  29. 29

  30. 30

  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

  35. 35

  36. 36 Descendant Pain To Many Children

  37. 37

  38. 38

  39. 39

  40. 40 Component Inception Use Wrappers

  41. 41

  42. 42

  43. 43 File Workflow Base, Desc, Mod [Desc]

  44. 44

  45. 45 Refactoring FTW Copy Paste Programming

  46. 46

  47. 47

  48. 48 Wrapping Up

  49. http://stylebitz.customink.com/style_bitz/rails#demo-pages Demo HTML & Sass 49

  50. 50

  51. 51

  52. @extend %your-skills; THANK YOU! 52