Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Stylesheet Wrangling with SCSS


Published on

Optimizing your stylesheets for the web through the use of SCSS.

Published in: Technology, Design
  • Apologies for the missing visual elements in the slides - I need to figure out why they're not showing up on slideshare.
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Stylesheet Wrangling with SCSS

  1. 1. Stylesheet Wrangling with SCSS OPTIMIZING YOUR STYLESHEETS FOR THE WEB Sarah Forst • @quoo Photo: The State Library and Archives, Florida
  2. 2. Why optimize your CSS? •  Varied devices handle CSS differently •  Not everyone has great bandwidth •  Long load times keep users from your content Photo: the New York Public Library
  3. 3. The Basics •  •  •  •  Use efficient selectors Minimize stylesheet length Minimize HTTP requests Optimize images Photo: the Mennonite Church USA Archives
  4. 4. SCSS Syntax Overview Mixins • Extends • Placeholders • Variables
  5. 5. Nesting is Bad Photo: the Smithsonian Institution
  6. 6. Lots of nesting Becomes
  7. 7. Less Nesting Becomes
  8. 8. Class Names (almost no nesting) Becomes
  9. 9. Benchmarking Results* Class Names File Size (kb) Some Nesting Render Time (ms) Lots of Nesting 0 100 200 300 400 500 *With 100 ul’s and 1000 selectors.
  10. 10. Organization •  Keeping your styles well organized is key to optimizing your CSS •  Always follow clear and consistent naming conventions, for example, BEM or SMACSS Photo: LSE Library
  11. 11. File Structure without Preprocesors
  12. 12. File Structure with Preprocesors
  13. 13. Reducing Stylesheet Length •  Reduce external libraries to only what you need •  Customize your reset Photo: Cornell University Library
  14. 14. Use Utility SCSS Files •  Utility SCSS files should be made as partials •  They should not generate any additional CSS Photo: Galt Museum & Archives
  15. 15. Compass for Spriting •  Compass has a sprite generating tool •  It’s especially useful for larger projects where it’s hard to keep track of which sprites are used and which are not. • • 6992616
  16. 16. Always Check your Generated Code •  SCSS is an extension of CSS •  Use extends in conjunction with placeholders •  Don’t use a mixin where you can use an extend Photo: The US National Archives
  17. 17. In Summary •  Stay organized •  Cleanup unused code •  Use the SCSS utilities demoed here (extends, mixins, placeholders, and variables) •  Use sprites Photo: NASA
  18. 18. Useful Tools •  •  •  •  •  Chrome’s Profiler Yslow Google Page Speed For firebug: CSS Usage, Firefinder Compass and Grunt Photo: OSU Special Collections