refactoring for contractors

Laura Summers


Tues Jan 13, 2015


all the CSS-things

  • Frameworks! 
  • Preprocessors! 
  • Naming conventions! 
  • Architecture conventions! 

css architecture  / conventions


Exception #1

Is the codebase massive? As in thousands of lines of ugly CSS? Or lots and lots of fingerprints on the repo + no doco to support? 

Exception #2

Will you be working on the repo for less than a week? And never ever (ever) touching it again?

css syntax

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5rem; }

sass syntax

  width: 100%
  margin-left: auto
  margin-right: auto
  margin-top: 0
  margin-bottom: 0
  max-width: 62.5rem

sass ABANDONDment

don't suffer the pain of regret

don't judge a web(book) by it's cover


take it by small steps

Start with SCSS

Take a step back

Level up

Improve your naming convention on partials 

  • Consider reusable code / components vs. one-off
  • Maybe use a convention like BEM?
  • If lots of partials, add a T.O.C. to root
  • Steal a convention from an existing sass library like Bootstrap or Foundation Zurb
  • Make your own...
    • _global-component-name.sass
    • _unique-page-name.sass

level up

  • Change SCSS to SASS syntax
  • Store reusable colors as variables
  • Tidy up redundant code
  • Try some mixins


keep learning
change your mind

keep refactoring


for example


look for quick wins




for example

Get stakeholder buy-in

By fixing a problem! 

Start with some fast little wins in the CSS

Then, show how it would be faster with sass

improvements to workflow

All the tools

there's no perfect repo

Plus some great articles


REGEX is your friend

find and destroy

traditional search


with regex


power of regex



don't try to memorise...

to conclude

  1. Preprocess your CSS if not already
  2. Small, iterative improvements
  3. Use your common sense when choosing what to refactor
  4. Get buy-in from stakeholders
  5. Try REGEX

but most importantly...

Refactoring for contractors

By summerscope

Refactoring for contractors

Using a perfect ’Sass’tem in an imperfect world

  • 1,505

More from summerscope