Stylesheet Wrangling with SCSS provides tips for optimizing CSS for performance. It recommends using efficient selectors, minimizing stylesheet length and HTTP requests, and optimizing images. SCSS features like mixins, extends, placeholders and variables can help organize CSS. Nesting selectors leads to bloated CSS, so using class names with minimal nesting is better. Proper file structure and organization is also important for optimizing CSS. Tools like Compass, Grunt, and dev tools in browsers can help benchmark and optimize CSS.

Viewers also liked

Similar to Stylesheet Wrangling with SCSS

Recently uploaded

Stylesheet Wrangling with SCSS

• 1.
  Stylesheet Wrangling withSCSSOPTIMIZING YOUR STYLESHEETS FOR THE WEBSarah Forst • @quooPhoto: The State Library and Archives, Florida
• 2.
  Why optimize yourCSS?•  Varied devices handle CSS differently•  Not everyone has great bandwidth•  Long load times keep users from your contentPhoto: the New York Public Library
• 3.
  The Basics• • • • Use efficientselectorsMinimize stylesheet lengthMinimize HTTP requestsOptimize imagesPhoto: the Mennonite Church USA Archives
• 4.
  SCSS Syntax OverviewMixins• Extends • Placeholders • Variables
• 5.
  Nesting is BadPhoto:the Smithsonian Institution
• 6.
  Lots of nestingBecomes
• 7.
  Less NestingBecomes
• 8.
  Class Names (almostno nesting)Becomes
• 9.
  Benchmarking Results*Class NamesFileSize (kb)Some NestingRender Time (ms)Lots of Nesting0100200300400500*With 100 ul’s and 1000 selectors.
• 10.
  Organization•  Keeping yourstyleswell organized is key tooptimizing your CSS•  Always follow clear andconsistent namingconventions, forexample, BEM orSMACSSPhoto: LSE Library
• 11.
  FileStructurewithoutPreprocesors
• 12.
  FileStructurewithPreprocesors
• 13.
  Reducing Stylesheet Length• Reduce external librariesto only what you need•  Customize your resetPhoto: Cornell University Library
• 14.
  Use Utility SCSSFiles•  Utility SCSS filesshould be made aspartials•  They should notgenerate anyadditional CSSPhoto: Galt Museum & Archives
• 15.
  Compass for Spriting• Compass has a sprite generatingtool•  It’s especially useful for largerprojects where it’s hard to keeptrack of which sprites are usedand which are not.•  http://compass-style.org/•  https://gist.github.com/quoo/6992616
• 16.
  Always Check yourGeneratedCode•  SCSS is an extension of CSS•  Use extends in conjunction withplaceholders•  Don’t use a mixin where you canuse an extendPhoto: The US National Archives
• 17.
  In Summary•  Stayorganized•  Cleanup unused code•  Use the SCSS utilities demoed here(extends, mixins, placeholders, andvariables)•  Use spritesPhoto: NASA
• 18.
  Useful Tools• • • • • Chrome’s ProfilerYslowGooglePage SpeedFor firebug: CSS Usage, FirefinderCompass and GruntPhoto: OSU Special Collections