stylesheet wrangling with scss

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

Upload: sforst

Post on 07-Jul-2015

488 views

Category:

Technology


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Stylesheet Wrangling with SCSS

Stylesheet Wrangling with SCSS OPTIMIZING YOUR STYLESHEETS FOR THE WEB

Sarah Forst • @quoo Photo: The State Library and Archives, Florida

Page 2: Stylesheet Wrangling with SCSS

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

Page 3: Stylesheet Wrangling with SCSS

The Basics •  Use efficient selectors •  Minimize stylesheet length •  Minimize HTTP requests •  Optimize images

Photo: the Mennonite Church USA Archives

Page 4: Stylesheet Wrangling with SCSS

SCSS Syntax Overview Mixins • Extends • Placeholders • Variables

Page 5: Stylesheet Wrangling with SCSS

Nesting is Bad

Photo: the Smithsonian Institution

Page 6: Stylesheet Wrangling with SCSS

Lots of nesting

Becomes

Page 7: Stylesheet Wrangling with SCSS

Less Nesting

Becomes

Page 8: Stylesheet Wrangling with SCSS

Class Names (almost no nesting)

Becomes

Page 9: Stylesheet Wrangling with SCSS

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.

Page 10: Stylesheet Wrangling with SCSS

•  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

Page 11: Stylesheet Wrangling with SCSS

File Structure without Preprocesors

Page 12: Stylesheet Wrangling with SCSS

File Structure with Preprocesors

Page 13: Stylesheet Wrangling with SCSS

•  Reduce external libraries to only what you need

•  Customize your reset

Photo: Cornell University Library

Reducing Stylesheet Length

Page 14: Stylesheet Wrangling with SCSS

Photo: Galt Museum & Archives

•  Utility SCSS files should be made as partials

•  They should not generate any additional CSS

Use Utility SCSS Files

Page 15: Stylesheet Wrangling with SCSS

•  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

Page 16: Stylesheet Wrangling with SCSS

•  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

Page 17: Stylesheet Wrangling with SCSS

•  Stay organized •  Cleanup unused code •  Use the SCSS utilities demoed here

(extends, mixins, placeholders, and variables)

•  Use sprites

Photo: NASA

In Summary

Page 18: Stylesheet Wrangling with SCSS

•  Chrome’s Profiler •  Yslow •  Google Page Speed •  For firebug: CSS Usage, Firefinder •  Compass and Grunt

Photo: OSU Special Collections

Useful Tools