After writing CSS for over 10 years you'd think you would know everything there is to know, right? I couldn't be more wrong and I found out the hard way. While my first formal code review session was painfully embarrassing it was also the most important lesson I have learned throughout my career. Code reviews force you to communicate on a different level which ultimately leads to more thoughtful coding practices. When writing Sass and other pre-processed languages it is even more important that you review your code continually, which even the more seasoned front end developers may neglect at times. Bottom line: Code reviews will make you better.

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

2. Picture: “I should have known better….” patries71, Flickr
AW WK
# ARD

3. PROVIDES DESIGN FEEDBACK
EVERYONE

4. Picture: Genesis Theme for WordPress
DEVELOPERS
BACK-END

5. BUGS
Picture: Hasan Baglar/Sony World Photography Awards 2014
D I S C O V E R

6. Picture: Screenshot from The Simpsons, Matt Groening
INCREASE
FAMILIARITY

7. UNDERSTAND
it well enough
you don't
S I M P LY
If you can't explain it,

8. Picture: “President Obama does the Hour of Code” CODE.org, YouTube
FORMAL

9. Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr
COMMIT
PRE
(pre-merge)

10. COMMIT
POST
(post-merge)

11. YOUR OWN
DARN CODE
REVIEW
(please)
Picture: “I totally gave up!” Jay, Flickr

12. Any Text Editor
… and so many more

13. C O D E R E T R E AT
NETWORK
GROW YOUR
Picture: “Network”, Ivan Emelianov, Flickr

14. OPEN SOURCE
CONTRIBUTE TO

15. Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr
TIME
PREPARATION

16. STAY
“THIS IS
💩POSITIVE

17. MUSTAVOID
ABSOLUTES ALWAYS
NEVER

18. MUSTAVOID
ABSOLUTES ALWAYS
NEVER

19. Why didn’t you
JUST
do X,

20. Why didn’t you
JUST
do X,
IDIOT

21. ?QUESTIONS
ASK

22. DOCUMENT
ISSUES

23. YOUR CODE
DOCUMENT

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

25. PROVIDE
CONTEXT
CODEPEN.IO/STACY

26. BE PREPARED
to discuss what
you wrote &

27. IT’S NOT YOU
…
IT’S YOUR CODE

28. STANDARDS
FOLLOW

29. FORMATTING
CONSISTENT

30. R U L E
.page {
…
…
…
.header {
…
…
…

31. R U L E
ul {
…
…
…
&.dropdown {
…
…
…
li.nav-item {
a {
color: white;
}
}

32. R U L E
.page .header .container .nav ul.dropdown
color: white;
}

33. R U L E
.page .header .container .nav ul.dropdown
color: white;
}
.store.page .header .container .nav ul.dr
color: green;
}

34. R U L E
.page .header .container .nav ul.dropdown
color: white;
}
.store.page .header .container .nav ul.dr
color: green;
}
;!important;

35. .nav {
li {
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
}
a {
color: orange;
&:hover {
color: salmon;
}
}
}
INTENTION
NEST WITH

36. UNNECESSARY
ABSTRACTION

37. *:focus {
outline: none;
}
ACCESSIBILITY
C H E C K F O R M I S TA K E S

38. .element {
@include span-columns(12);
}
OUTPUT
B L O AT E D

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

40. .element {
@include fill-parent;
}
OUTPUT
B L O AT E D

41. .element {
width: 100%;
}
C O M P I L E S T O :
OUTPUT
B L O AT E D

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

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

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

45. G I V E U N C S S A T RY
U N U S E D
CSS

46. OOCSS BEMSMACSS
/* ABOVE ALL */
SCALABILITY

47. After Code ReviewBefore Code Review
FTW!
CODE REVIEWS
Quality

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