sass code reviews - how one code review changed my life #sassconf2015

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

Picture: “I should have known better….” patries71, Flickr

AW WK# ARD

PROVIDES DESIGN FEEDBACKEVERYONE

Picture: Genesis Theme for WordPress

DEVELOPERSBACK-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

INCREASEFAMILIARITY

UNDERSTAND it well enough

you don'tS 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

COMMITPRE(pre-merge)

COMMITPOST(post-merge)

YOUR OWN DARN CODE

REVIEW(please)

Picture: “I totally gave up!” Jay, Flickr

Any Text Editor

… and so many more

C O D E R E T R E AT

NETWORKGROW YOUR

Picture: “Network”, Ivan Emelianov, Flickr

OPEN SOURCECONTRIBUTE TO

Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr

TIMEPREPARATION

STAY

“THIS IS 💩POSITIVE

MUSTAVOIDABSOLUTES ALWAYS

NEVER

MUSTAVOIDABSOLUTES ALWAYS

NEVER

Why didn’t you

JUSTdo X,

Why didn’t you

JUSTdo X,

IDIOT

?QUESTIONSASK

DOCUMENTISSUES

YOUR CODEDOCUMENT

C O D E P E N . I O / S TA C Y

PROVIDE CONTEXT

PROVIDE CONTEXT

CODEPEN.IO/STACY

BE PREPAREDto discuss what

you wrote &

IT’S NOT YOU …

IT’S YOUR CODE

STANDARDSFOLLOW

FORMATTINGCONSISTENT

R U L E

.page { … … … .header { … … … .container {

R U L E

… ul { … … … &.dropdown { … … …

li.nav-item { a { color: white; } } } }

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;

} }

}

INTENTIONNEST WITH

UNNECESSARY ABSTRACTION

*:focus { outline: none;

}

ACCESSIBILITYC H E C K F O R M I S TA K E S

.element { @include span-columns(12); }

OUTPUTB 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; }

OUTPUTB L O AT E D

.element { width: 100%; }

C O M P I L E S T O :

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

OOCSS BEMSMACSS

/* ABOVE ALL */

SCALABILITY

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