stylesheet wrangling with scss
DESCRIPTION
Optimizing your stylesheets for the web through the use of SCSS.TRANSCRIPT
Stylesheet Wrangling with SCSS OPTIMIZING YOUR STYLESHEETS FOR THE WEB
Sarah Forst • @quoo Photo: The State Library and Archives, Florida
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
The Basics • Use efficient selectors • Minimize stylesheet length • Minimize HTTP requests • Optimize images
Photo: the Mennonite Church USA Archives
SCSS Syntax Overview Mixins • Extends • Placeholders • Variables
Nesting is Bad
Photo: the Smithsonian Institution
Lots of nesting
Becomes
Less Nesting
Becomes
Class Names (almost no nesting)
Becomes
Benchmarking Results*
0 100 200 300 400 500
Lots of Nesting
Some Nesting
Class Names
File Size (kb)
Render Time (ms)
*With 100 ul’s and 1000 selectors.
• 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
Organization
File Structure without Preprocesors
File Structure with Preprocesors
• Reduce external libraries to only what you need
• Customize your reset
Photo: Cornell University Library
Reducing Stylesheet Length
Photo: Galt Museum & Archives
• Utility SCSS files should be made as partials
• They should not generate any additional CSS
Use Utility SCSS Files
• 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
Compass for Spriting
• SCSS is an extension of CSS • Use extends in conjunction with
placeholders • Don’t use a mixin where you can
use an extend
Always Check your Generated Code
Photo: The US National Archives
• Stay organized • Cleanup unused code • Use the SCSS utilities demoed here
(extends, mixins, placeholders, and variables)
• Use sprites
Photo: NASA
In Summary
• Chrome’s Profiler • Yslow • Google Page Speed • For firebug: CSS Usage, Firefinder • Compass and Grunt
Photo: OSU Special Collections
Useful Tools