The Top 5 Performance Shenanigans of CSS Preprocessors - Nicole Sullivan

The Top 5 Performance Shenanigans of CSS Preprocessors

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 CSSpreprocessors 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!

http://photos3.meetupstatic.com/photos/event/b/4/2/0/event_226546112.jpeg

About Nicole Sullivan (@stubbornella (https://twitter.com/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 .

The event is hosted at Yelp on Thursday, May 9th, 2013 at 7:00PM. Doors open at 6:30PM. Food and drinks will be provided by our sponsor Yelp (thanks guys!).

Note about your RSVP: please use your first/last name to RSVP and bring a government issued id as Yelp's security will use that information before letting you in the building. Thank you!

AGENDA:

18:30 :: Check-in & Mingle 19:00 :: Introductions & Presentation 20:00 :: Questions and Answer & Open Form 20:30 :: Networking & Discussion ??? :: Beers at the pub! Yelp is located at 706 Mission Street in San Francisco.

OUR SPONSORS:

O'Reilly Velocity Conference (http://velocityconf.com/velocity2013/) - O'Reilly Velocity Web Performance and Operations Conference

Akamai (http://www.akamai.com/) - Optimize Content & Media Delivery

Strangeloop (http://www.strangeloopnetworks.com/) provides advanced front-end optimization (FEO) solutions to companies like eBay/PayPal, Visa, and O'Reilly Media.

SOASTA (http://www.soasta.com/) - SOASTA’s web and mobile app test automation solution enables teams to test with unprecedented speed, scale and precision.

Yelp (http://www.yelp.com/careers) - Real people, real reviews