Slaying the Dragon

Refactoring CSS for Maintainability Using Sass

Refactoring is a practice that is often overlooked when it comes to CSS. As a result, styles seem to just grow and grow, until no one knows for sure which styles apply where, or whether many rules are still used at all. In this talk, we’ll cover strategies for refactoring CSS using Sass, with a focus on maintainability of code. Topics include code organization, naming, incremental change, and handling special cases such as responsive styles.

This talk is based on my experience refactoring thousands of lines of CSS into Sass, in a way that allowed for continuous feature development, as well as supporting multiple layers of responsive styles and device-specific styles.

Treat CSS as code, and structure and refactor it like you would any other code. Image © 2013 Alicia Liu.

2016 FITC Web Unleashed, Toronto

2015 SassConf, Austin

2014 Front-Trends, Warsaw

Video Vimeo

2013 HTML5 Developer Conference

Video Youtube