Refactoring CSS

johnwlongJavaScript Summit 2015

refactorcss

Programming Principles for Designers

wwwthesasswaycom

refactorcss

wwwuservoicecom

refactorcss

Why refactor your CSS

refactorcss

refactorcss

In the beginninghellip

refactorcss

Designers writing CSS

refactorcss

vs

Design

Programming

refactorcss

vs

DesignFIGHT

Programming

ldquoItrsquos almost a challenge to find a development team thatrsquos working on a codebase thatrsquos more

than a couple of years old where the CSS isnrsquot the most frightening and hated part of that systemrdquo

refactorcss

Andy Hume CSS for Grownups SXSW Interactive 2012

bitlycss-for-grownups

CSS === Programming

refactorcss

You are a programmer

refactorcss

We have a lot to learn from programmers

refactorcss

The CSS Community

What is refactoring

refactorcss

RefactoringA disciplined approach to changing

code to make it easy to understand and cheaper to modify in the future

without changing its observed behavior

refactorcss

Based on Martin Fowlerrsquos definition

Goals of Refactoring

refactorcss

Goals of Refactoringbull Clean maintainable code

refactorcss

Goals of Refactoringbull Clean maintainable code

bull Easy to understand

refactorcss

Goals of Refactoringbull Clean maintainable code

bull Easy to understand

bull Composable parts

refactorcss

Goals of Refactoringbull Clean maintainable code

bull Easy to understand

bull Composable parts

bull Reusable without modification

refactorcss

Goals of Refactoringbull Clean maintainable code

bull Easy to understand

bull Composable parts

bull Reusable without modification

bull Parts behave the same in all contexts

refactorcss

Goals of Refactoringbull Clean maintainable code

bull Easy to understand

bull Composable parts

bull Reusable without modification

bull Parts behave the same in all contexts

bull Hard to breakrefactorcss

refactorcss

SMACSSsmacsscom

BEMbeminfo

OOCSSoocssorg

This is Modular CSS

wwwthesasswaycommodular-css

What is MODULAR CSS

refactorcss

Modular CSS

Objects button

Child Objects button-icon

Subclasses primary-button

Modifiers is-selected

wwwthesasswaycommodular-css refactorcss

An Example

refactorcss

ulmenubar background white include box-shadow(rgba(black 02) 0 1px 1px) list-style none font-size 14px padding 0 10px gt li display inline-block position relative gt a color black display block padding 10px 14px text-decoration none amphover background 29a7f5 color white gt ul include box-shadow(rgba(black 05) 0 5px 15px) include border-radius(3px) include border-top-left-radius(0) display none position absolute top 100

ltul class=menubargt ltligt lta href=gtFileltagt ltulgt ltligtlta href=gtOpenltagtltligt ltligtlta href=gtSaveltagtltligt ltligtlta href=gtSave asltagtltligt ltligtlta href=gtCloseltagtltligt ltli class=separatorgtltligt ltligtlta href=gtExitltagtltligt ltulgt ltligt ltulgt

bitlymenu-11 refactorcss

ltul class=menubargt ltligt lta class=menubar-item href=gtFileltagt ltul class=menu gt ltligtlta class=menu-item href=gtOpenltagtltligt ltligtlta class=menu-item href=gtSaveltagtltligt ltligtlta class=menu-item href=gtSave asltagtltligt ltligtlta class=menu-item href=gtCloseltagtltligt ltli class=menu-separatorgtltligt ltligtlta class=menu-item href=gtExitltagtltligt ltulgt ltligt ltulgt

menubar background white include box-shadow(rgba(black 02) 0 1px 1px) list-style none font-size 14px padding 0 10px gt li display inline-block position relative menubar-item color black display block padding 10px 14px text-decoration none amphover background 29a7f5 color white menu include box-shadow(rgba(black 05) 0 5px 15px) include border-radius(3px) include border-top-left-radius(0) display none

2 bitlymenu-2 refactorcss

ltul class=menubargt ltli class=menubar-item gt lta class=menubar-item-target href=gtFileltagt ltul class=menu gt ltli class=menu-item gtlta class=menu-item-target href=gtOpenltagtltligt ltli class=menu-item gtlta class=menu-item-target href=gtSaveltagtltligt ltli class=menu-item gtlta class=menu-item-target href=gtSave asltagtltligt ltli class=menu-item gtlta class=menu-item-target href=gtCloseltagtltligt ltli class=menu-separatorgtltligt ltli class=menu-item gtlta class= menu-item-target href=gtExitltagtltligt ltulgt ltligt ltulgt

menubar background white include box-shadow(rgba(black 02) 0 1px 1px) list-style none font-size 14px padding 0 10px menubar-item display inline-block position relative menubar-item-target color black display block padding 10px 14px text-decoration none amphover background 29a7f5 color white 3 bitlymenu-3 refactorcss

wwwthesasswaycommodular-css

refactorcss

Learn to think in objects

Not selectors

refactorcss

Refactoring Patterns

refactorcss

refactorcsshttpenwikipediaorgwikiCode_refactoring

Refactoring Categories

1Techniques for abstraction

refactorcsshttpenwikipediaorgwikiCode_refactoring

Refactoring Categories

1Techniques for abstraction

2Techniques for breaking up code

refactorcsshttpenwikipediaorgwikiCode_refactoring

Refactoring Categories

1Techniques for abstraction

2Techniques for breaking up code

3Techniques for improving names

refactorcsshttpenwikipediaorgwikiCode_refactoring

Refactoring Categories

refactorcss

1 Abstraction

bull Extracting Objects

refactorcss

1 Abstraction

bull Extracting Objects

bull Extracting Child-Objects

refactorcss

1 Abstraction

bull Extracting Objects

bull Extracting Child-Objects

bull Extracting Subclasses

refactorcss

1 Abstraction

bull Extracting Objects

bull Extracting Child-Objects

bull Extracting Subclasses

bull Extracting Modifiers

refactorcss

1 Abstraction

refactorcss

2 Breaking up code

bull Decomposing objects

refactorcss

2 Breaking up code

bull Decomposing objects

bull Assembling larger components from several objects

refactorcss

2 Breaking up code

bull Decomposing objects

bull Assembling larger components from several objects

bull Extracting Mixins and Functions

refactorcss

2 Breaking up code

bull Decomposing objects

bull Assembling larger components from several objects

bull Extracting Mixins and Functions

bull Removing duplication (DRY)

refactorcss

2 Breaking up code

refactorcss

3 Improving names

bull Simplify a selector (Remove ID or Element selectors)

refactorcss

3 Improving names

bull Simplify a selector (Remove ID or Element selectors)

bull Renaming objects mixins functions variables

refactorcss

3 Improving names

bull Simplify a selector (Remove ID or Element selectors)

bull Renaming objects mixins functions variables

bull Move into superclass

refactorcss

3 Improving names

bull Simplify a selector (Remove ID or Element selectors)

bull Renaming objects mixins functions variables

bull Move into superclass

bull Move into subclass

refactorcss

3 Improving names

bull Simplify a selector (Remove ID or Element selectors)

bull Renaming objects mixins functions variables

bull Move into superclass

bull Move into subclass

bull Refactor comment to mixin

refactorcss

3 Improving names

More Examples

refactorcss

content form button sidebar button border none border-radius 5px background $green box-shadow $dark-green -4px 0 0 inset color white font 100 18px15 sans-serif padding 8px 25px 11px

refactorcss

Renaming a selector

content form button sidebar button border none border-radius 5px background $green box-shadow $dark-green -4px 0 0 inset color white font 100 18px15 sans-serif padding 8px 25px 11px

refactorcss

button border none border-radius 5px background $green box-shadow $dark-green -4px 0 0 inset color white font 100 18px15 sans-serif padding 8px 25px 11px

Renaming a selector

refactorcss

Renaming a selector

ltbutton class=buttongtSave changesltbuttongt

button border none border-radius 5px background $green box-shadow $dark-green -4px 0 0 inset color white font 100 18px15 sans-serif padding 8px 25px 11px

refactorcss

Extracting a subclass

button border none border-radius 5px background $green box-shadow $dark-green -4px 0 0 inset color white font 100 18px15 sans-serif padding 8px 25px 11px

refactorcss

button border none border-radius 5px background $gray box-shadow $dark-gray -4px 0 0 inset color white font 100 18px15 sans-serif padding 8px 25px 11px

primary-button background $green box-shadow $dark-green 0 -4px 0 0 inset

Extracting a subclass

ltbutton class=buttongtCancelltbuttongt

ltbutton class=button primary-buttongtSave changesltbuttongt

refactorcss

Extracting a subclass

refactorcss

info color $white background $blue padding 20px success color $white background $green padding 20px failure color $white background $red padding 20px

refactorcss

Extracting a superclass

info color $white background $blue padding 20px success color $white background $green padding 20px failure color $white background $red padding 20px

refactorcss

message color $white padding 20px info-message background $blue success-message background $green failure-message background $red

Extracting a superclass

ltdiv class=message info-messagegtHiyaltdivgt ltdiv class=message success-messagegtSuccessltdivgt ltdiv class=message failure-messagegtWhoopsltdivgt

refactorcss

Extracting a superclass

refactorcss

info color $white background $blue padding 20px success color $white background $green padding 20px failure color $white background $red padding 20px

refactorcss

Extracting a placeholder superclass

info color $white background $blue padding 20px success color $white background $green padding 20px failure color $white background $red padding 20px

refactorcss

message color $white padding 20px info extend message background $blue success extend message background $green failure extend message background $red

Extracting a placeholder superclass

info color $white background $blue padding 20px success color $white background $green padding 20px failure color $white background $red padding 20px

refactorcss

message color $white padding 20px info extend message background $blue success extend message background $green failure extend message background $red

Extracting a placeholder superclass

info success failure color $white padding 20px info background $blue success background $green failure background $red

ltdiv class=infogtHiyaltdivgt ltdiv class=successgtSuccessltdivgt ltdiv class=failuregtWhoopsltdivgt

refactorcssrefactorcss

Extracting a placeholder superclass

buttonnext border none border-radius 5px background $gray box-shadow $dark-gray -4px 0 0 inset color white font 100 18px15 sans-serif padding 8px 25px 11px

ampafter include icon(next)

refactorcss

Decomposing objects

buttonnext border none border-radius 5px background $gray box-shadow $dark-gray -4px 0 0 inset color white font 100 18px15 sans-serif padding 8px 25px 11px

ampafter include icon(next)

refactorcss

Decomposing objects

buttonnext border none border-radius 5px background $gray box-shadow $dark-gray -4px 0 0 inset color white font 100 18px15 sans-serif padding 8px 25px 11px

ampafter include icon(next)

refactorcss

button border none border-radius 5px background $gray box-shadow $dark-gray -4px 0 0 inset color white font 100 18px15 sans-serif padding 8px 25px 11px right-arrow-icon include icon(next)

Decomposing objects

ltbutton class=buttongt Next lti class=right-arrow-icongtltigt ltbuttongt

refactorcss

Decomposing objects

refactorcss

video padding 10px border $border-color margin 10px 0 min-width 400px

Crazy IE5-6 min-width hack html amp width expression( documentbodyclientWidth lt 400 400px auto )

refactorcss

Refactor to comment

video padding 10px border $border-color margin 10px 0 min-width 400px

Crazy IE5-6 min-width hack html amp width expression( documentbodyclientWidth lt 400 400px auto )

refactorcss

mixin crazy-ie-min-width-hack($width) html amp width unquote( expression( + documentbodyclientWidth lt + ($width + 1) + + $width + px auto) )

video min-width 400px include crazy-ie-min-width-hack(400)

Refactor to comment

button border none background black color white padding 15px 8px

refactorcss

Namespacing styles

button border none background black color white padding 15px 8px

refactorcss

legacy button border none background black color white padding 15px 8px

Namespacing styles

button border none background black color white padding 15px 8px

refactorcss

Prefixing styles

button border none background black color white padding 15px 8px

refactorcss

legacy-button border none background black color white padding 15px 8px

Prefixing styles

Pros and consexist for each type of

refactoring

refactorcss

(This list was not exhaustive)

Best Practices

refactorcss

A disciplined approach to changing code to make it easy to understand and

cheaper to modify in the futurewithout changing its observed behavior

refactorcss

Refactoring

Based on Martin Fowlerrsquos definition

1 Donrsquot try to refactor AND add functionality

at the same time

refactorcss

Taken from the book ldquoThe Pragmatic Programmerrdquo

2 Make sure you have good tests BEFORE

refactoring

refactorcss

Taken from the book ldquoThe Pragmatic Programmerrdquo

3 Take short deliberate steps AND test after

each step

refactorcss

Taken from the book ldquoThe Pragmatic Programmerrdquo

4 Refactor early and often

refactorcss

Taken from the book ldquoThe Pragmatic Programmerrdquo

TESTING CSS

refactorcss

refactorcss

Tools for testing CSS

Visit csstest for more test tools

1 Manual testing

refactorcss

Tools for testing CSS

Visit csstest for more test tools

1 Manual testing

bull Paging through your site by hand

refactorcss

Tools for testing CSS

Visit csstest for more test tools

1 Manual testing

bull Paging through your site by hand

bull Example pages or styleguides

refactorcss

Tools for testing CSS

Visit csstest for more test tools

1 Manual testing

bull Paging through your site by hand

bull Example pages or styleguides

2 Automated Testing

refactorcss

Tools for testing CSS

Visit csstest for more test tools

1 Manual testing

bull Paging through your site by hand

bull Example pages or styleguides

2 Automated Testing

bull Regression testing (Phantom CSS Wraith CSSert)

refactorcss

Tools for testing CSS

Visit csstest for more test tools

1 Manual testing

bull Paging through your site by hand

bull Example pages or styleguides

2 Automated Testing

bull Regression testing (Phantom CSS Wraith CSSert)

bull Linting (CSS Lint SCSS Lint)

refactorcss

Tools for testing CSS

Visit csstest for more test tools

1 Manual testing

bull Paging through your site by hand

bull Example pages or styleguides

2 Automated Testing

bull Regression testing (Phantom CSS Wraith CSSert)

bull Linting (CSS Lint SCSS Lint)

bull Coverage (CSS Coverage for Firefox)

refactorcss

Tools for testing CSS

Visit csstest for more test tools

CLOSING THOUGHTS

refactorcss

bitlycss-for-grownups

refactorcss

bitlyunderstanding-modular-css

refactorcss

refactorcss

thesasswaycommodular-css

OxygenBreathe new life into your stylesheets

O2

oxygencsscom

refactorcss

ldquoRefactoring Ruby Editionrdquo mdash Martin Fowler

ldquoThe Pragmatic Programmerrdquo mdash Dave Thomas amp Andy Hunt

Books

bitlycss-for-grownups

bitlyunderstanding-modular-css

thesasswaycommodular-css

oxygencsscom

Links

johnwlong thesassway oxygencss

Twitter

refactorcss

Questions