refactoring for contractors

Laura Summers

@summerscope

Tues Jan 13, 2015

OR, USING A PERFECT 'SASS'TEM IN AN IMPERFECT WORLD

all the CSS-things

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

css architecture  / conventions

#1

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

.row
  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

#2

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
    css2sass.heroku.com
  • Store reusable colors as variables
  • Tidy up redundant code
  • Try some mixins

#3

keep learning
change your mind

keep refactoring

oops...

for example

#4

look for quick wins

LISTEN.

really

LISTEN.

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

#5

REGEX is your friend

find and destroy

traditional search

page-node

with regex

/.*page-node.*

power of regex

/page-node(\d*)

/page-node(\d{1,3})

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,348

More from summerscope