stylesheet wrangling with scss

Download Stylesheet Wrangling with SCSS

Post on 07-Jul-2015




3 download

Embed Size (px)


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


  • 1. Stylesheet Wrangling with SCSS OPTIMIZING YOUR STYLESHEETS FOR THE WEB Sarah Forst @quoo Photo: The State Library and Archives, Florida

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. The Basics Use efficient selectors Minimize stylesheet length Minimize HTTP requests Optimize images Photo: the Mennonite Church USA Archives 4. SCSS Syntax Overview Mixins Extends Placeholders Variables 5. Nesting is BadPhoto: the Smithsonian Institution 6. Lots of nestingBecomes 7. Less NestingBecomes 8. Class Names (almost no nesting)Becomes 9. Benchmarking Results* Class NamesFile Size (kb)Some NestingRender Time (ms) Lots of Nesting 0100200300400500 *With 100 uls and 1000 selectors. 10. Organization Keeping your styles well organized is key to optimizing your CSS Always follow clear and consistent naming conventions, for example, BEM or SMACSSPhoto: LSE Library 11. File Structure without Preprocesors 12. File Structure with Preprocesors 13. Reducing Stylesheet Length Reduce external libraries to only what you need Customize your resetPhoto: Cornell University Library 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. Compass for Spriting Compass has a sprite generating tool Its especially useful for larger projects where its hard to keep track of which sprites are used and which are not. 6992616 16. Always Check your Generated Code SCSS is an extension of CSS Use extends in conjunction with placeholders Dont use a mixin where you can use an extendPhoto: The US National Archives 17. In Summary Stay organized Cleanup unused code Use the SCSS utilities demoed here (extends, mixins, placeholders, and variables) Use sprites Photo: NASA 18. Useful Tools Chromes Profiler Yslow Google Page Speed For firebug: CSS Usage, Firefinder Compass and Grunt Photo: OSU Special Collections