View
23
Download
0
Category
Preview:
Citation preview
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
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
refactorcss
Questions
Recommended