The Top 5 Performance Shenanigans of CSS Preprocessors

Nicole Sullivan (Stubbornella)
Web Performance, Mission City Ballroom B1
Average rating: ****.
(4.09, 11 ratings)

CSS is a simple declarative language. Preprocessors were introduced to overcome it’s many limitations. They add much needed language additions like simple inheritance, mixins, variables, and helpers. Developers have long awaited this functionality, and the use of CSS preprocessors like SASS, Less, and Stylus has become ubiquitous on big websites. While preprocessors can be used to improve performance they often output some downright ugly code. During this talk, you will learn about a new set of performance best practices for projects that employ a CSS preprocessor.

By the end of the session, you’ll learn to

  • Choose between extend and include
  • Understand how subnodes affect the output
  • Build base classes when your structure is complicated
  • Use placeholder classes
  • Create helpers and effectively use existing helpers
  • Keep the SASS abstracted from the HTML
  • Get your media queries under control

You’ll also hear about the top 5 preprocessor gotchas — I tried them all as I was converting the OOCSS open source project to SASS. In this session you’ll get to learn from my embarrassing mistakes!

Photo of Nicole Sullivan

Nicole Sullivan

Stubbornella

Nicole is a front-end performance consultant, CSS aficionado, and author. She started the Object-Oriented CSS open source project, which answers the question: how do you scale CSS for millions of visitors or thousands of pages? She also consulted with many companies including Facebook, Salesforce, the W3C, Adobe, Paypal, Trulia and Box. She is the co-creator of Smush.it, an image optimization service in the cloud, and CSS Lint (http://csslint.net), a tool that helps correct common CSS errors before they are pushed to production. She is passionate about CSS, web standards, and scalable front-end architecture for large commercial websites.
She co-authored The Web Performance Daybook, Vol 2 and Even Faster Websites and blogs at http://stubbornella.org.

Comments on this page are now closed.

Comments

Brian John
06/23/2013 2:31am PDT

Great talk! Can the slides be posted?

Sponsors

Sponsorship Opportunities

For information on exhibition and sponsorship opportunities at the conference, contact Gloria Lombardo at (203) 381-9245 or glombardo@oreilly.com

Media Partner Opportunities

For media partnerships, contact mediapartners@ oreilly.com

Press and Media

For media-related inquiries, contact Maureen Jennings at maureen@oreilly.com

Contact Us

View a complete list of Velocity contacts