Stylesheet Wrangling with SCSS

853 views

Published on

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

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

No Downloads
Views
Total views
853
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
22
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

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. •  http://compass-style.org/ •  https://gist.github.com/quoo/ 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

×