Clean out your Sass Junk-Drawer

Read the post that inspired:
http://blackfalcon.roughdraft.io/4436524

This is the updated deck I used for SassConf 2013 NYC

CSS has had a long and sordid past. A developer never sets out with the goal of making a complete and total mess of things. Their intention is not to build something that is practically illegible, impractical to maintain and is limited in scale. But somehow, this is where many inevitably end up. Luckily, all is not lost. With some simple strategies, organizational methods and out-of-the box tools, we can really help get that junk-drawer inline.

Transcript

1. clean out your junk-drawer! SassConf 2013 NY
2.  
   are you ready to receive the light?
3. 
   
   
   
    For many of us getting started with Sass, at one time or another have created a junk-drawer of files. Fo mi a c
4. 
   
   
   
    ne ed For most, this was a rookie mistake, but for others, this is a continuing issue with our architecture and file management techniques. Sas ru de
5. 
   
   
   
    e s is ur s. Sass doesn't come with any real rules for file management so developers are pretty much left to their own devices.
6. 
   
     increased complexity
7. 
    the good ‘ol days .selection { ! font-size: 12px; line-height: 13px; ! font-family: Arial, Helvetica, sans-serif; ! text-align: center; ! margin-top: 10px; } .selection ul,li { ! font-size: 12px; line-height: 14px; ! font-family: Arial, Helvetica, sans-serif; ! text-align: left; ! vertical-align: top; ! margin-left: 10px; ! width: auto; ! height: auto; }
8.  
   
    things got much more complicated /* GLOBALHEADER */ #globalheader { position:relative; display:block; width:980px; height:36px; margin: 18px auto; text-align:left; z-index:9998; background:url(/global/nav/images/ globalheader.png) repeat-x; -khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border- radius:4px; -webkit-border-radius:4px; border-radius:4px; -khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px; font:12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } @media only screen and (max-device-width:768px) { #globalheader { z-index:1; } } #globalheader #globalnav { position:relative; display:block; margin:0; padding:0; zoom:1; z-index:3; } #globalheader #globalnav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #globalheader #globalnav li { display:inline; } #globalheader #globalnav li a { float:left; width:102px; height:36px; overflow:hidden; crap ton of CSS
9.  
   
    things got much more complicated /* GLOBALHEADER */ #globalheader { position:relative; display:block; width:980px; height:36px; margin: 18px auto; text-align:left; z-index:9998; background:url(/global/nav/images/ globalheader.png) repeat-x; -khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border- radius:4px; -webkit-border-radius:4px; border-radius:4px; -khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px; font:12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } @media only screen and (max-device-width:768px) { #globalheader { z-index:1; } } #globalheader #globalnav { position:relative; display:block; margin:0; padding:0; zoom:1; z-index:3; } #globalheader #globalnav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #globalheader #globalnav li { display:inline; } #globalheader #globalnav li a { float:left; width:102px; height:36px; overflow:hidden; crap ton of CSS
10.  
    
     we tried ... but failed @import url(‘path/reset.css’); @import url(‘path/evil.css’); @import url(‘path/more-evil.css’); @import url(‘path/bootstrap-sucks.css’); web performance killer
11.  
    
     we tried ... but failed @import url(‘path/reset.css’); @import url(‘path/evil.css’); @import url(‘path/more-evil.css’); @import url(‘path/bootstrap-sucks.css’); web performance killer
12. 
       Sass, LESS, etc ...
13. Text Text /* GLOBAL VARIABLES */ $prefix_defaults: -moz- -webkit- -o- -ms- '' !default; $webkit_support: -webkit- '' !default; $moz_support: -moz- '' !default; $ms_support: -ms- '' !default; $moz_webkit_support: -moz- -webkit- '' !default; $moz_ms_support: -moz- -ms- '' !default; $webkit_ms_support: -webkit- -ms- '' !default; $grid-width: 980px; $max-device-width: 768px; $background-position-full: 100%; $background-position-half: 50%; $link-color: #7F7F7F; $text-color: #333; /* Mixins */ @mixin border_radius ($border_radius, $prefixes: $webkit_support) { @each $prefix in $prefixes { #{$prefix}border-radius: $border_radius; } } @mixin box_shadow ($shadow_color: $shadow_color, $shadow: $shadow, $prefixes: $prefix_defaults) { @each $prefix in $prefixes { #{$prefix}box-shadow: $shadow_color $shadow; } } variables mixins 
      
    
14. /* GLOBALHEADER */ #globalheader { position:relative; display:block; width:$grid-width; height:36px; margin: 18px auto; text-align:left; z-index:9998; background:url(/global/nav/images/ globalheader.png) repeat-x; ! -khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border- radius:4px; -webkit-border-radius:4px; border-radius:4px; ! -khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; - webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px; ! font:12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } @media only screen and (max-device-width:$max-device-width) { ! #globalheader { z-index:1; } } #globalheader #globalnav { position:relative; display:block; margin:0; padding:0; zoom:1; z-index:3; } #globalheader #globalnav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #globalheader #globalnav li { display:inline; } #globalheader #globalnav li a { float:left; width:102px; height:36px; overflow:hidden; text-indent:-9999px; background:url(/global/nav/images/globalnav.png) no-repeat; cursor:pointer; } /* VML FOR IE */ v\:roundrect, v\:fill { behavior:url(#default#VML); } #globalheader-roundrect, #globalheader-fill { display:block; position:absolute; width:; height:35px; top:0; left:0; z-index:2; } #globalheader-shadow { display:block; position:absolute; width:$grid-width; height:35px; top:-1px; left:-2px; z-index:1; -ms- filter:"progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)"; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); } /* VARIANTS */ 
     
    
15. /* GLOBALHEADER */ #globalheader { position:relative; display:block; width:$grid-width; height:36px; margin: 18px auto; text-align:left; z-index:9998; background:url(/global/nav/images/ globalheader.png) repeat-x; ! -khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border- radius:4px; -webkit-border-radius:4px; border-radius:4px; ! -khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; - webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px; ! font:12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } @media only screen and (max-device-width:$max-device-width) { ! #globalheader { z-index:1; } } #globalheader #globalnav { position:relative; display:block; margin:0; padding:0; zoom:1; z-index:3; } #globalheader #globalnav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #globalheader #globalnav li { display:inline; } #globalheader #globalnav li a { float:left; width:102px; height:36px; overflow:hidden; text-indent:-9999px; background:url(/global/nav/images/globalnav.png) no-repeat; cursor:pointer; } /* VML FOR IE */ v\:roundrect, v\:fill { behavior:url(#default#VML); } #globalheader-roundrect, #globalheader-fill { display:block; position:absolute; width:; height:35px; top:0; left:0; z-index:2; } #globalheader-shadow { display:block; position:absolute; width:$grid-width; height:35px; top:-1px; left:-2px; z-index:1; -ms- filter:"progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)"; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); } /* VARIANTS */ 
     
     die hard
16.  
    
    
      early days of file management style.scss mixins.scss variables.scss typography.scss forms.scss
17.  
    
    
      early days of file management style.scss mixins.scss variables.scss typography.scss forms.scss overly simplified
18.  
    
    
      early days of file management style.scss mixins.scss variables.scss typography.scss forms.scss overly simplified too much code in one file
19.  
    
    
      early days of file management style.scss mixins.scss variables.scss typography.scss forms.scss overly simplified too much code in one file base, elements, modules and layout in the same files
20.  
    
    
      early days of file management style.scss mixins.scss variables.scss typography.scss forms.scss overly simplified too much code in one file base, elements, modules and layout in the same files cats and dogs living together, mass hysteria!
21.  
    
    
      early days of file management style.scss mixins.scss variables.scss typography.scss forms.scss overly simplified too much code in one file base, elements, modules and layout in the same files cats and dogs living together, mass hysteria!
22.   
    
      seemed like a good idea
23. 
    
    file structures of inspiration app/ models/ views/ controllers/ admin/ blog/ shared/
24. 
    
    file structures of inspiration app/ models/ views/ controllers/ admin/ blog/ shared/ THE MVC IS AWESOME! LET’S USE THIS TO ORGANIZE THE SASS!
25.  
    
    
     where do I put the abstracted stuff? style.scss mixins variables forms typography partials views
26.  
    
    
     where do I put the abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders
27.  
    
    
     where do I put the abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders UI modules and patterns inevitably ended up within the View styles
28.  
    
    
     where do I put the abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders UI modules and patterns inevitably ended up within the View styles But code is being duplicated? Oh yeah, make it a partial!
29.  
    
    
     where do I put the abstracted stuff? style.scss mixins variables forms typography partials junk-drawer views attempts to break out mixins and variables == lots of files dumped into folders UI modules and patterns inevitably ended up within the View styles But code is being duplicated? Oh yeah, make it a partial!
30. 
     felt so right ... was sooooo wrong <html> <body> <section> <header></header> <article> <header></header> </article> </section> </body> </html> html { body { section { header {color: green;} article { header {} } } } } the HTML: the Sass: html body section header {color: green;} the CSS:
31. 
     felt so right ... was sooooo wrong <html> <body> <section> <header></header> <article> <header></header> </article> </section> </body> </html> html { body { section { header {color: green;} article { header {} } } } } the HTML: the Sass: html body section header {color: green;} the CSS:
32. 
    
    
      learn from ‘doing it wrong’
33. 
      our perspective was all wrong
34. 
      our perspective was all wrong Styles are written based on placement in the view
35. 
      our perspective was all wrong Styles are written based on placement in the view CSS too specific. Very fragile with placement
36. 
      our perspective was all wrong Styles are written based on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup
37. 
      our perspective was all wrong Styles are written based on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘⌘C / ⌘V`
38. 
      our perspective was all wrong Styles are written based on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘⌘C / ⌘V` A major case of the div’itus
39. 
      our perspective was all wrong Styles are written based on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘⌘C / ⌘V` A major case of the div’itus Using IDs for styling to over-ride the cascade
40. 
    
     start with the smaller parts
41. 
    
     start with the smaller parts Buttons Typography Color pallet standard icons borders and line widths
42. 
      start small and build up
43. 
      start small and build up Header module Hero module Nav module Hero copy module Article module List module
44.   
     
    
     nature has taught us everything
45. 
    
      code the element, create the module and assemble the layout buttons/ color/ forms/ layouts/ modules/ typography/ ui_patterns/ _buttons.scss _config.scss _forms.scss _reset.scss _typography.scss style.scss vendor/
46.   
    
    
      a powerful weapon in the Sass arsenal // Following sequence will load the necessary Stipe libraries // ---------------------------------------------------------------- @import "compass/css3"; // Including the Compass CSS3 mixins @import "stipe/manifest"; @import "vendor/**/*"; // This where you start building your own styles. // ---------------------------------------------------------------- @import "typography"; @import "forms"; @import "buttons"; @import "design"; @import "ui_patterns/**/*"; // manifest files @import "modules/**/*"; // manifest files @import "layouts/*"; // manifest files
47.   
    
    
      a powerful weapon in the Sass arsenal // Following sequence will load the necessary Stipe libraries // ---------------------------------------------------------------- @import "compass/css3"; // Including the Compass CSS3 mixins @import "stipe/manifest"; @import "vendor/**/*"; // This where you start building your own styles. // ---------------------------------------------------------------- @import "typography"; @import "forms"; @import "buttons"; @import "design"; @import "ui_patterns/**/*"; // manifest files @import "modules/**/*"; // manifest files @import "layouts/*"; // manifest files keep sub- directory files nicely organized
48.   
    
      there is no right or wrong here Text @import "grid/lib/the_grid"; @import "grid/lib/grid_placement"; @import "grid/lib/grid_margin"; @import "grid/lib/push_logic"; @import "grid/mixins"; @import "grid/extends"; manual: @import "grid/lib/*"; @import "grid/mixins"; @import "grid/extends"; glob: }
49.   
     this can really save your bacon
50. !   manage the smart defaults for your UI /////// Typography configuration/////// // ----------------------------------------------------------------------------- $font_size: 12; // $heading_1: 46; $heading_2: 32; $heading_3: 28; $heading_4: 18; $heading_5: 18; $heading_6: 18; // $line: $font_size * 1.5; // $small_point_size: 10; $large_point_size: 14; // $primary_font_family: #{"Helvetica Neue", Arial, sans-serif}; $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif}; $heading_font_family: #{"Helvetica Neue", Arial, sans-serif}; $icon_font_alpha: #{'FontAwesome'}; $icon_font_bravo: #{'zocial'}; /////// Default webfont directory/////// // ----------------------------------------------------------------------------- $webfont_directory: "/fonts/"; /////// default image directory ///////
51. !   manage the smart defaults for your UI /////// Typography configuration/////// // ----------------------------------------------------------------------------- $font_size: 12; // $heading_1: 46; $heading_2: 32; $heading_3: 28; $heading_4: 18; $heading_5: 18; $heading_6: 18; // $line: $font_size * 1.5; // $small_point_size: 10; $large_point_size: 14; // $primary_font_family: #{"Helvetica Neue", Arial, sans-serif}; $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif}; $heading_font_family: #{"Helvetica Neue", Arial, sans-serif}; $icon_font_alpha: #{'FontAwesome'}; $icon_font_bravo: #{'zocial'}; /////// Default webfont directory/////// // ----------------------------------------------------------------------------- $webfont_directory: "/fonts/"; /////// default image directory /////// all logic NO CSS!
52. 
      
     where we get to work
53. 
      
     all CSS, NO LOGIC! Text button { font-size: em(16); @include background-image(linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)); .no-cssgradients & { background-color: #1e5799; } border: 1px solid $primary_button_border_color; border-radius: em(3); color: $white; padding: em(6) em(10); margin: 0; @media #{$mobile} { width: 100%; }
54. 
     where’z u go?
55. 
    
      functional vs. presentational buttons/ _mixins.scss _extends.scss _buttons.scss
56. 
    
      functional vs. presentational buttons/ _mixins.scss _extends.scss _buttons.scss functional presentational
57.   
    
       organize your thoughts // Custom button extends and mixins // -------------------------------------------------- @import "buttons/mixins"; @import "buttons/extends"; // buttons // -------------------------------------------------- //* toadstool buttons */ button, a.button { @inlcude button($button-color); }
58.   
    
       organize your thoughts // Custom button extends and mixins // -------------------------------------------------- @import "buttons/mixins"; @import "buttons/extends"; // buttons // -------------------------------------------------- //* toadstool buttons */ button, a.button { @inlcude button($button-color); } functional presentational
59.   
    
    
      seeing is believing
60.   
    
    
      simplicity in organization Module Sass is exclusive to a particular interaction of the application. Modules will come in all shapes and sizes. Larger modules may also consist of smaller modules or smaller UI patterns.
61.   
    
    
      simplicity in organization UI patterns are a gray area and are subject to personal interpretation. In practice ... small UI patterns begin to emerge. It is practical to try and encapsulate these smaller patterns for reuse, but I don't lose sleep over them.
62.   
    
    
      simplicity in organization modules/ _extends.scss registration/ _functions.scss _mixins.scss _module_registration.scss _module_personalInfo.scss
63.   
    
    
      simplicity in organization modules/ _extends.scss registration/ _functions.scss _mixins.scss _module_registration.scss _module_personalInfo.scss _extends.scss purchase/ _functions.scss _mixins.scss _module_order-summary.scss _module_purchase.scss
64.   
    
    
      simplicity in organization modules/ _extends.scss registration/ _functions.scss _mixins.scss _module_registration.scss _module_personalInfo.scss directory name primary module
65.  
    
    
      name-space by the module itself %order-summary { .form-header { border-radius: em(5) em(5) 0 0; margin-bottom: 0; } .order-summary-container { @extend %Grid4ThreeSideBox; } .initial-assetListing { @media #{$mobile} { display: none; } } .price { text-align: right; } .total { font-size: em($large_point_size); } footer {
66.   
    
     bringing the picture into focus
67. 
    
       make up the view
68. 
    
       make up the view module module module module module
69.  
    
      manage your grid .checkout-experience { .customer-checkout { @extend %checkout; @extend %grid_7; @media #{$tablet_portrait} { @include grid(10, $grid_context: 10); } } .order-summary { @extend %order-summary; @extend %grid_5; @media #{$tablet_portrait} { @include grid(10, $grid_context: 10); } @media #{$mobile} { @include grid(4, $grid_context: 4); }
70.  
    
      manage your grid .checkout-experience { .customer-checkout { @extend %checkout; @extend %grid_7; @media #{$tablet_portrait} { @include grid(10, $grid_context: 10); } } .order-summary { @extend %order-summary; @extend %grid_5; @media #{$tablet_portrait} { @include grid(10, $grid_context: 10); } @media #{$mobile} { @include grid(4, $grid_context: 4); } name-spaced selector placement of elements
71.   what have we learned?
72.   what have we learned? CSS management has come a long way
73.   what have we learned? Vanilla CSS has NO TOOLS for code management CSS management has come a long way
74.   what have we learned? Vanilla CSS has NO TOOLS for code management outside-in BAD! inside-out BETTER! CSS management has come a long way
75.   what have we learned? Vanilla CSS has NO TOOLS for code management outside-in BAD! inside-out BETTER! modular files with @import system === WINNING! CSS management has come a long way
76.   what have we learned? Vanilla CSS has NO TOOLS for code management outside-in BAD! inside-out BETTER! modular files with @import system === WINNING! elements, modules and then the view CSS management has come a long way
77.   what have we learned? Vanilla CSS has NO TOOLS for code management outside-in BAD! inside-out BETTER! modular files with @import system === WINNING! elements, modules and then the view Take everything you know AND SET IT ON FIRE! CSS management has come a long way
78.   what have we learned? Vanilla CSS has NO TOOLS for code management outside-in BAD! inside-out BETTER! modular files with @import system === WINNING! elements, modules and then the view Take everything you know AND SET IT ON FIRE! CSS management has come a long way Organize your Sass! it will hurt less
79. 
     Sass in Depth Kianosh - @kianoshp Dale - @anotheruiguy
80. 
     Sass in Depth Kianosh - @kianoshp Dale - @anotheruiguy http://www.manning.com/dsande/ promo code - mldsandeau
81.  you, in the front ...