SLAYING THE DRAGONRefactoring CSS for Maintainability Using Sass

Alicia Liu @aliciatweet

CSS

$#@%!

I eat man-hours for breakfast. RAWR.

I’m cute.Play with me!

PREPARING FOR YOUR QUEST

to rewrites

Non-blocking Productive Not go crazy

Goals

KNOW YOUR ENEMY

#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)topleftrepeat-x;height:auto!important;}#header.container {background:url(/images/backgrounds/profile.png)41px0repeat-y;padding-bottom:25px;margin:0auto0auto;}#header_pic {position:absolute;top:3px;left:10px;margin-right:20px;text-align:middle;margin-top:-7px;box-shadow:#C5C5C51px1px1px;-moz-box-shadow:#C5C5C51px1px1px;-webkit-box-shadow:#C5C5C51px1px1px;border:2pxsolidwhite;border-radius:999px;-webkit-border-radius:999px;-moz-border-radius:999px;}#header_picimg {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:5px5px00;padding:12px0015px;margin:005px0;height:41px;list-style:none;background:#ecf0f0;box-shadow:#fff03px2px;-webkit-box-shadow:0px15px15pxwhite;-moz-box-shadow:white0px15px15px;z-index:5;}.tabsli{float:left;padding:9px22px14px22px;margin-right:5px;font-size:1.3em;border-radius:5px5px00;-webkit-border-radius:5px5px00;-moz-border-radius:5px5px00;color:#9c9c9c;cursor:pointer;}.tabs_selected{background:white;background:white;color:#333!important;font-weight:bold;box-shadow:#C5C5C51px1px1px;position:relative;}.tabs_selected_cover {position:absolute;z-index:2;background:white;bottom:-5px;left:0;width:100%;height:5px;}

Warning Signs

Over-reliance on IDs

Generic class names

Inconsistent vendor prefixing

Too verbose

??? Formatting

Code Smells

!important

.header.groupullia

.header>#nav

Where?inline head duplicates

TOOLS & TACTICS

CSS WITH SUPERPOWERS

Choose Your Own Adventure

Style Guide

Colors Font sizes Buttons Device widths Etc.

Design

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

Code

scss-lint Linter + IDE = 💖

Use A Linter

BEM OOCSS SMACSS DIY

Naming Convention

“There are only two hard things in Computer Science:cache invalidation and naming things.”

Phil Karlton

…and off-by-one errors

.loading

.global-loading-indicator✔

Be Specific

.red-alert

.dialog-error-alert✔

Semantic Names

.heading

.sidebar-heading✔

.sidebar-callout-heading✔

Namespace

Separate Behavior

Prefix.js-✔

Data-attribute✔

.menu.blue

.menu.menu-cool✔

Single Purpose Modifiers

Single Class<divclass="menumenu-widemenu-blue">

.cool-menu{@includemenu($blue);width:$menu-wide-width;//morestyleshere}

@extend?

Author CSS > Output CSS

Code Organization

@import'third-party';@import'variables';@import'mixins';@import'fonts';@import'elements';

@import'alerts';@import'buttons';

@import'nav';@import'comments';@import'products';@import'footer';

@import'responsive';@import'nav.responsive';

How many CSS Files?

IE, webview, email, contexts …

EASY TO CHANGE

READY? REFACTOR!

STOP THE BLEEDING

LEAVE IT BETTER THAN YOU FOUND IT

( °□°) ︵

Don’t Try To Do It All At Once

Moving & Adding Styles Create new files

Don’t extend, duplicate

Namespace your new styles (e.g. beta-)

Or rename your deprecated styles

Deleting StylesTools: uncss, grunt-ucss

Regular expressions are your friend

Search everywhere: JavaScript, HTML, backend code

Test as you go

Asp.Net Python Ruby Javascript

Java Objective-C C++ Perl

Treat Css As Code

HAPPILY AFTER…

Photo by Matteo maggionihttps://flic.kr/p/7BzbhK

Thanks!

Alicia Liu @aliciatweet

alicialiu.me/talks