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
- BEM / OOCSS / SMACSS
- For more, check out:
Six revisions article @
sixrevisions.com/css/standardized-methods-for-css/
Peter Wilson's talk @
speakerdeck.com/peterwilsoncc/be-responsive-css-naming-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
- A grunt task for removing unused CSS from your projects
github.com/addyosmani/grunt-uncss - Replaces references to non-optimized scripts or stylesheets into a set of HTML files
github.com/yeoman/grunt-usemin - Parse CSS and add vendor-prefixed CSS properties using the Can I Use database
github.com/nDmitry/grunt-autoprefixer - A command line tool to easily handle events on file system modifications
github.com/guard/guard - Post processing, whut!?!
sitepoint.com/css-post-processing-pleeease/
there's no perfect repo
Plus some great articles
-
Frontend automation with Grunt, Sass + BrowserSync.
wearejh.com/development/frontend-automation-with-grunt-sass-browsersync/ -
Automating your workflow with Grunt
markgoodyear.com/2013/07/automating-your-workflow-with-grunt/ -
Improved developer tooling with Yeoman
markgoodyear.com/2013/07/automating-your-workflow-with-grunt/
#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
- Preprocess your CSS if not already
- Small, iterative improvements
- Use your common sense when choosing what to refactor
- Get buy-in from stakeholders
- Try REGEX
but most importantly...
