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

Clean out your Sass Junk-Drawer

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.

992bbe0cad45fc9f941a4717f9f01642?s=128

Dale Sande

October 19, 2013
Tweet

More Decks by Dale Sande

Other Decks in Programming

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 ...

  82. None