Presented at FITC's Web Unleashed 2016 Conference by Alicia Liu FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond Save 10% off any of our events with discount code 'slideshare' Check out our events at http://fitc.ca or follow us at https://twitter.com/fitc Overview 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 Alicia's 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. Objective Learn strategies for refactoring CSS using Sass, focusing on maintainability. Target Audience Developers who are responsible for writing and maintaining CSS/Sass, especially in codebases that have been around for a while. Assumed Audience Knowledge CSS and Sass Five Things Audience Members Will Learn Reasons to refactor CSS Code naming and organization conventions Different ways to DRY up code with Sass Identify problem areas that need refactoring How to refactor incrementally

1. SLAYING
THE DRAGON
Refactoring CSS for Maintainability
Using Sass
Alicia Liu
@aliciatweet

2. CSS
$#@%!

3. I eat man-hours for
breakfast. RAWR.
I’m cute.
Play with me!

4. PREPARING
FOR YOUR
QUEST

5. to rewrites

6. Non-blocking
Productive
Not go crazy
Goals

7. KNOW
YOUR
ENEMY

8. #header { position: relative; margin-bottom: 0; padding-top: 50px; border: none; -moz-box-shadow: none;
-webkit-box-shadow: none; box-shadow: none; background: url(/images/backgrounds/fade.png) top left repeat-x; height: auto !important; }
#header .container { background: url(/images/backgrounds/profile.png) 41px 0 repeat-y; padding-bottom: 25px; margin: 0 auto 0
auto; }
#header_pic { position: absolute; top: 3px; left: 10px; margin-right: 20px; text-align: middle; margin-top: -7px; box-
shadow: #C5C5C5 1px 1px 1px; -moz-box-shadow: #C5C5C5 1px 1px 1px; -webkit-box-shadow: #C5C5C5 1px 1px 1px; border: 2px solid white; border-
radius: 999px; -webkit-border-radius: 999px; -moz-border-radius: 999px; }
#header_pic img { width: 50px; height: 50px; border-radius: 999px; -webkit-border-radius: 999px; -moz-border-radius:
999px; }
#header_info { margin-left: 100px; width: auto; max-width: 350px; margin-bottom: 5px; }
#header_info_name { display: block; color: #5b5b5b; }
#header_info_name:hover { text-decoration: none; }
#header_info_challenge_name { font-size: 2.3em; font-weight: bold; line-height: 100%; }
#header_momentum_gauge { position: absolute; top: 3px; left: 10px; }
.tabs { position: absolute; top: 2px; left: 2px; width: 351px; border-radius: 5px 5px 0 0; padding: 12px 0 0 15px; margin
0 0 5px 0; height: 41px; list-style: none; background: #ecf0f0; box-shadow: #fff 0 3px 2px; -webkit-box-shadow: 0px 15px 15px white; -moz-box-
shadow: white 0px 15px 15px; z-index: 5; }
.tabs li { float: left; padding: 9px 22px 14px 22px; margin-right: 5px; font-size: 1.3em; border-radius: 5px 5px 0 0; -
webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; color: #9c9c9c; cursor: pointer; }
.tabs_selected { background: white; background: white; color: #333 !important; font-weight: bold; box-shadow: #C5C5C5 1px 1px 1px;
position: relative; }
.tabs_selected_cover { position: absolute; z-index: 2; background: white; bottom: -5px; left: 0; width: 100%; height: 5px; }

9. Warning
Signs
Over-reliance on IDs
Generic class names
Inconsistent vendor prefixing
Too verbose
??? Formatting

10. Code
Smells
!important
.header .group ul li a
.header > #nav

11. Where?
inline
head
duplicates

12. TOOLS &
TACTICS

13. CSS WITH SUPERPOWERS

14. Choose Your Own Adventure

15. Style Guide

16. Colors
Font sizes
Buttons
Device widths
Etc.
Design

17. px, em, rem, %, vw…
white space
Allow IDs?
Max nesting level
Code

18. scss-lint
Linter + IDE = 💖
Use A Linter

19. BEM
OOCSS
SMACSS
DIY
Naming
Convention

20. “There are only two hard things in
Computer Science:
cache invalidation and naming things.”
Phil Karlton
…and off-by-one errors

21. .loading
.global-loading-indicator ✔
Be Specific

22. .red-alert
.dialog-error-alert ✔
Semantic Names

23. .heading
.sidebar-heading ✔
.sidebar-callout-heading ✔
Namespace

24. Separate Behavior
Prefix .js- ✔
Data-attribute ✔

25. .menu.blue
.menu.menu-cool ✔
Single Purpose Modifiers

26. Single Class
<div class="menu menu-wide menu-blue">
.cool-menu {
@include menu($blue);
width: $menu-wide-width;
//more styles here
}

27. @extend?
Author CSS > Output CSS

28. Code Organization
@import 'third-party';
@import 'variables';
@import 'mixins';
@import 'fonts';
@import 'elements';

29. @import 'alerts';
@import 'buttons';
@import 'nav';
@import 'comments';
@import 'products';
@import 'footer';
@import 'responsive';
@import 'nav.responsive';

30. How many CSS Files?
IE, webview, email, contexts …

31. EASY TO CHANGE

32. READY?
REFACTOR!

33. STOP THE BLEEDING

34. LEAVE IT
BETTER
THAN YOU
FOUND IT

35. ( °□°) ︵
Don’t Try To Do It All At Once

37. Moving & Adding Styles
Create new files
Don’t extend, duplicate
Namespace your new styles (e.g. beta-)
Or rename your deprecated styles

38. Deleting Styles
Tools: uncss, grunt-ucss
Regular expressions are your friend
Search everywhere: JavaScript, HTML,
backend code
Test as you go

39. Asp.Net
Python
Ruby
Javascript
Java
Objective-C
C++
Perl
Treat Css As Code

40. HAPPILY
AFTER…
Photo by Matteo maggionihttps://flic.kr/p/7BzbhK

41. Thanks!
Alicia Liu
@aliciatweet
alicialiu.me/talks