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.

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 Bad
Photo: the Smithsonian Institution

6. Lots of nesting
Becomes

7. Less Nesting
Becomes

8. Class Names (almost no nesting)
Becomes

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. 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. File
Structure
without
Preprocesors

12. File
Structure
with
Preprocesors

13. Reducing Stylesheet Length
• Reduce external libraries
to only what you need
• Customize your reset
Photo: 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
• 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. 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. 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
•
•
•
•
•
Chrome’s Profiler
Yslow
Google Page Speed
For firebug: CSS Usage, Firefinder
Compass and Grunt
Photo: OSU Special Collections