Sass Code Reviews - How one code review changed my life #SassConf2015

Software

stacy-kvernmo
The present document can't read!
Please download to view
48
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Description
Text
  • Stacy Kvernmo @stacykvernmo T U R N H U M I L I AT I O N I N T O G R E AT N E S S CODE REVIEWS http://www.twitter.com/stacykvernmo
  • Picture: “I should have known better….” patries71, Flickr AW WK# ARD
  • PROVIDES DESIGN FEEDBACK EVERYONE
  • Picture: Genesis Theme for WordPress DEVELOPERS BACK-END
  • BUGS Picture: Hasan Baglar/Sony World Photography Awards 2014 D I S C O V E R
  • Picture: Screenshot from The Simpsons, Matt Groening INCREASE FAMILIARITY
  • UNDERSTAND it well enough you don't S I M P LY If you can't explain it,
  • Picture: “President Obama does the Hour of Code” CODE.org, YouTube FORMAL
  • Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr COMMIT PRE (pre-merge)
  • COMMIT POST (post-merge)
  • YOUR OWN DARN CODE REVIEW (please) Picture: “I totally gave up!” Jay, Flickr
  • Any Text Editor … and so many more http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://codepen.io/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://sassmeister.com/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://brackets.io/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ http://www.sublimetext.com/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/ https://atom.io/
  • C O D E R E T R E AT NETWORK GROW YOUR Picture: “Network”, Ivan Emelianov, Flickr http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.meetup.com http://www.coderetreat.org https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/ https://www.girldevelopit.com/
  • OPEN SOURCE CONTRIBUTE TO https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/ https://github.com/
  • Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr TIME PREPARATION
  • STAY “THIS IS 💩POSITIVE
  • MUSTAVOID ABSOLUTES ALWAYS NEVER
  • MUSTAVOID ABSOLUTES ALWAYS NEVER
  • Why didn’t you JUST do X,
  • Why didn’t you JUST do X, IDIOT
  • ?QUESTIONSASK
  • DOCUMENT ISSUES
  • YOUR CODE DOCUMENT
  • C O D E P E N . I O / S TA C Y PROVIDE CONTEXT
  • PROVIDE CONTEXT CODEPEN.IO/STACY http://codepen.io/stacy
  • BE PREPARED to discuss what you wrote &
  • IT’S NOT YOU … IT’S YOUR CODE
  • STANDARDS FOLLOW http://sass-guidelin.es/
  • FORMATTING CONSISTENT https://www.npmjs.com/package/grunt-scss-lint
  • R U L E .page { … … … .header { … … … .container { http://thesassway.com/beginner/the-inception-rule
  • R U L E … ul { … … … &.dropdown { … … … li.nav-item { a { color: white; } } } } http://thesassway.com/beginner/the-inception-rule
  • R U L E .page .header .container .nav ul.dropdown li.nav-item a { color: white; }
  • R U L E .page .header .container .nav ul.dropdown li.nav-item a { color: white; } .store.page .header .container .nav ul.dropdown li.nav-item a { color: green; }
  • R U L E .page .header .container .nav ul.dropdown li.nav-item a { color: white; } .store.page .header .container .nav ul.dropdown li.nav-item a { color: green; } ;!important;
  • .nav { li { margin-right: 1rem; &:last-child { margin-right: 0; } } a { color: orange; &:hover { color: salmon; } } } INTENTION NEST WITH
  • UNNECESSARY ABSTRACTION
  • *:focus { outline: none; } ACCESSIBILITY C H E C K F O R M I S TA K E S
  • .element { @include span-columns(12); } OUTPUT B L O AT E D
  • .element { float: left; display: left; margin-right: 2.35765%; width: 100%; } .element:last-child { margin-right: 0; } C O M P I L E S T O : B L O AT E D OUTPUT
  • .element { @include fill-parent; } OUTPUT B L O AT E D
  • .element { width: 100%; } C O M P I L E S T O : OUTPUT B L O AT E D
  • .element { width: 100%; } .element { float: left; display: left; margin-right: 2.35765%; width: 100%; } .element:last-child { margin-right: 0; } VS.OUTPUT B L O AT E D
  • .example { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } V E N D O R PREFIXES
  • .example { /* Unnecessary vendor prefixes -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; */ box-sizing: border-box; } U N U S E D CSS
  • G I V E U N C S S A T R Y U N U S E D CSS http://addyosmani.com/blog/removing-unused-css/
  • OOCSS BEMSMACSS /* ABOVE ALL */ SCALABILITY https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://smacss.com/ https://github.com/stubbornella/oocss/tree/master/oocss https://en.bem.info/ https://en.bem.info/ https://smacss.com/
  • After Code ReviewBefore Code Review FTW! CODE REVIEWS Quality
  • Stacy Kvernmo @stacykvernmo T U R N H U M I L I AT I O N I N T O G R E AT N E S S CODE REVIEWS http://www.twitter.com/stacykvernmo
Comments
Top