![Page 1: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/1.jpg)
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
![Page 2: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/2.jpg)
Picture: “I should have known better….” patries71, Flickr
AW WK# ARD
![Page 3: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/3.jpg)
PROVIDES DESIGN FEEDBACKEVERYONE
![Page 4: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/4.jpg)
Picture: Genesis Theme for WordPress
DEVELOPERSBACK-END
![Page 5: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/5.jpg)
BUGS
Picture: Hasan Baglar/Sony World Photography Awards 2014
D I S C O V E R
![Page 6: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/6.jpg)
Picture: Screenshot from The Simpsons, Matt Groening
INCREASEFAMILIARITY
![Page 7: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/7.jpg)
UNDERSTAND it well enough
you don'tS I M P LY
If you can't explain it,
![Page 8: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/8.jpg)
Picture: “President Obama does the Hour of Code” CODE.org, YouTube
FORMAL
![Page 9: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/9.jpg)
Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr
COMMITPRE(pre-merge)
![Page 10: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/10.jpg)
COMMITPOST(post-merge)
![Page 11: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/11.jpg)
YOUR OWN DARN CODE
REVIEW(please)
Picture: “I totally gave up!” Jay, Flickr
![Page 12: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/12.jpg)
Any Text Editor
… and so many more
![Page 13: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/13.jpg)
C O D E R E T R E AT
NETWORKGROW YOUR
Picture: “Network”, Ivan Emelianov, Flickr
![Page 14: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/14.jpg)
OPEN SOURCECONTRIBUTE TO
![Page 15: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/15.jpg)
Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr
TIMEPREPARATION
![Page 16: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/16.jpg)
STAY
“THIS IS 💩POSITIVE
![Page 17: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/17.jpg)
MUSTAVOIDABSOLUTES ALWAYS
NEVER
![Page 18: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/18.jpg)
MUSTAVOIDABSOLUTES ALWAYS
NEVER
![Page 19: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/19.jpg)
Why didn’t you
JUSTdo X,
![Page 20: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/20.jpg)
Why didn’t you
JUSTdo X,
IDIOT
![Page 21: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/21.jpg)
?QUESTIONSASK
![Page 22: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/22.jpg)
DOCUMENTISSUES
![Page 23: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/23.jpg)
YOUR CODEDOCUMENT
![Page 24: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/24.jpg)
C O D E P E N . I O / S TA C Y
PROVIDE CONTEXT
![Page 26: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/26.jpg)
BE PREPAREDto discuss what
you wrote &
![Page 27: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/27.jpg)
IT’S NOT YOU …
IT’S YOUR CODE
![Page 30: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/30.jpg)
R U L E
.page { … … … .header { … … … .container {
![Page 31: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/31.jpg)
R U L E
… ul { … … … &.dropdown { … … …
li.nav-item { a { color: white; } } } }
![Page 32: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/32.jpg)
R U L E
.page .header .container .nav ul.dropdown li.nav-item a { color: white; }
![Page 33: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/33.jpg)
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; }
![Page 34: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/34.jpg)
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;
![Page 35: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/35.jpg)
.nav { li {
margin-right: 1rem;
&:last-child { margin-right: 0;
} }
a { color: orange;
&:hover { color: salmon;
} }
}
INTENTIONNEST WITH
![Page 36: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/36.jpg)
UNNECESSARY ABSTRACTION
![Page 37: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/37.jpg)
*:focus { outline: none;
}
ACCESSIBILITYC H E C K F O R M I S TA K E S
![Page 38: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/38.jpg)
.element { @include span-columns(12); }
OUTPUTB L O AT E D
![Page 39: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/39.jpg)
.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
![Page 40: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/40.jpg)
.element { @include fill-parent; }
OUTPUTB L O AT E D
![Page 41: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/41.jpg)
.element { width: 100%; }
C O M P I L E S T O :
OUTPUTB L O AT E D
![Page 42: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/42.jpg)
.element { width: 100%;
}
.element { float: left; display: left; margin-right: 2.35765%; width: 100%;
}
.element:last-child { margin-right: 0;
}
VS.OUTPUTB L O AT E D
![Page 43: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/43.jpg)
.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
![Page 44: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/44.jpg)
.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
![Page 46: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/46.jpg)
OOCSS BEMSMACSS
/* ABOVE ALL */
SCALABILITY
![Page 47: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/47.jpg)
After Code ReviewBefore Code Review
FTW!CODE REVIEWS
Quality
![Page 48: Sass Code Reviews - How one code review changed my life #SassConf2015](https://reader033.vdocuments.net/reader033/viewer/2022051520/586e85291a28aba0038b62c7/html5/thumbnails/48.jpg)
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