CSS is often overlooked as something that would require a code review. The test for good CSS has been "Does everything look good?" With the complexity and scale of our projects these days, "looks good" is simple not enough. This presentation dives into what it takes to create or progress a positive and beneficial code review process for yourself or your team.

1. N O G A I N
N O PA I N
Stacy Kvernmo
@funstacy

2. A W K WA R D
Picture: “I should have known better….” patries71, Flickr
# N o P a i n | M Y S T O RY

3. D E S I G N C R I T I Q U E S
# N o P a i n
provides design feedback
EVERYONE

4. B A C K - E N D D E V E L O P E R S
# N o P a i n
Picture: Genesis Theme for WordPress

5. D I S C O V E R B U G S
Picture: Hasan Baglar/Sony World Photography Awards 2014
# N o P a i n | B E N E F I T S

6. I N C R E A S E FA M I L I A R I T Y
# N o P a i n | B E N E F I T S
Picture: Screenshot from The Simpsons, Matt Groening

7. UNDERSTAND
it well enough.
you don't
S I M P LY
If you can't explain it,
# N o P a i n | B E N E F I T S
E D U C AT I O N

8. F O R M A L P R O C E S S
# N o P a i n | W H E N
Picture: “President Obama does the Hour of Code” CODE.org, YouTube

9. P R E - C O M M I T
Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr
# N o P a i n | W H E N

10. P O S T- C O M M I T
# N o P a i n | W H E N

11. S E L F R E V I E W
# N o P a i n | W H E N
Picture: “I totally gave up!” Jay, Flickr

12. C O D E R E T R E AT
Picture: @CSSDevConf, Twitter
G R O W Y O U R N E T W O R KG R O W Y O U R N E T W O R K
# N o P a i n | R E S O U R C E S

13. O P E N S O U R C E
# N o P a i n | R E S O U R C E S

14. P R E PA R AT I O N T I M E
# N o P a i n | R E V I E W E R T I P S
Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr

15. S TAY P O S I T I V E
“THIS IS
# N o P a i n | R E V I E W E R T I P S
💩

16. AV O I D A B S O L U T E S
MUST
ALWAYS
NEVER
# N o P a i n | R E V I E W E R T I P S

17. J U S T
Why didn’t you
JUST
do X,
# N o P a i n | R E V I E W E R T I P S

18. J U S T
Why didn’t you
JUST
do X,
IDIOT
# N o P a i n | R E V I E W E R T I P S

19. ?
A S K Q U E S T I O N S
???
?
# N o P a i n | R E V I E W E R T I P S

20. D O C U M E N T I S S U E S
# N o P a i n | R E V I E W E R T I P S

21. D O C U M E N TAT I O N
# N o P a i n | A U T H O R T I P S

22. P R O V I D E C O N T E X T
# N o P a i n | A U T H O R T I P S

23. P R O V I D E C O N T E X T
# N o P a i n | A U T H O R T I P S
CODEPEN.IO/STACY

24. B E P R E PA R E D
Discuss what
you wrote &
# N o P a i n | A U T H O R T I P S

25. B E O P E N
# N o P a i n | A U T H O R T I P S
It’s not you
…
IT’S YOUR CODE

26. F O L L O W S TA N D A R D S
# N o P a i n | W H AT T O R E V I E W

27. F O R M AT T I N G
# N o P a i n | W H AT T O R E V I E W

28. E A S Y T O U N D E R S TA N D
# N o P a i n | W H AT T O R E V I E W

29. .page {
…
…
.header {
…
…
.container {
…
…
.nav {
…
…
ul {
…
…
I N C E P T I O N R U L E
# N o P a i n | W H AT T O R E V I E W

30. …
…
.container {
…
…
.nav {
…
…
ul {
…
…
&.dropdown {
…
…
li.nav-item {
a {
color: white;
}
}
}
}
I N C E P T I O N R U L E
# N o P a i n | W H AT T O R E V I E W

31. I N C E P T I O N R U L E
.page .header .container .nav ul.
color: white;
}
C O M P I L E S T O :
# N o P a i n | W H AT T O R E V I E W

32. I N C E P T I O N R U L E
.page .header .container .nav ul.
color: white;
}
C O M P I L E S T O :
# N o P a i n | W H AT T O R E V I E W

33. I N C E P T I O N R U L E
.page .header .container .nav ul.
color: white;
}
C O M P I L E S T O :
# N o P a i n | W H AT T O R E V I E W
body .page .header .container .na
color: violet !important;
}

34. .nav {
li {
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
}
a {
color: orange;
&:hover {
color: salmon;
}
}
}
I N C E P T I O N R U L E
# N o P a i n | W H AT T O R E V I E W

35. %base {
color: violet;
}
.foo {
@extend %base;
color: orange;
}
.bar {
color: yellow;
@extend %base;
}
.foo,
.bar {
color: violet;
}
.foo {
color: orange;
}
.bar {
color: yellow;
}
C O M P I L E S T O :
@ E X T E N D
# N o P a i n | W H AT T O R E V I E W

36. U N N E C E S S A RY A B S T R A C T I O N
# N o P a i n | W H AT T O R E V I E W

37. F I X E D VA L U E S
.element {
font-size: 27px;
height: 37px;
line-height: 44px;
margin-top: 19px;
width: 264px;
}
# N o P a i n | W H AT T O R E V I E W

38. A C C E S S I B I L I T Y
*:focus {
outline: none;
}
# N o P a i n | W H AT T O R E V I E W

39. .element {
@include span-columns(12);
}
B L O AT E D O U T P U T
# N o P a i n | W H AT T O R E V I E W

40. B L O AT E D O U T P U T
# N o P a i n | W H AT T O R E V I E W
.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 :

41. .element {
@include fill-parent;
}
B L O AT E D O U T P U T
# N o P a i n | W H AT T O R E V I E W

42. .element {
width: 100%;
}
B L O AT E D O U T P U T
# N o P a i n | W H AT T O R E V I E W

43. .element {
width: 100%;
}
B L O AT E D O U T P U T
.element {
float: left;
display: left;
margin-right: 2.35765%;
width: 100%;
}
.element:last-child {
margin-right: 0;
}
VS.
# N o P a i n | W H AT T O R E V I E W

44. V E N D O R P R E F I X E S
.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;
}
# N o P a i n | W H AT T O R E V I E W

45. U N U S E D C O D E
.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;
}
# N o P a i n | W H AT T O R E V I E W

46. U N U S E D C O D E
A D D U n C S S T O Y O U R B U I L D P R O C E S S
# N o P a i n | W H AT T O R E V I E W

47. S C A L A B I L I T Y
OOCSS
BEM
SMACSS
# N o P a i n | W H AT T O R E V I E W

48. R E V I E W Y O U R O W N C O D E
# N o P a i n | T O O L S
Any Text Editor
… and so many more

49. W O R K F L O W
# N o P a i n | T O O L S

50. C O D E R E V I E W
Gerrit Code Review
Upsource
Review BoardRietveld
# N o P a i n | T O O L S

51. C O D E R E V I E W, F T W !
# N o P a i n | K N O W L E D G E I S P O W E R
Time
After
0
25
50
75
100
Before
Quality

52. N O G A I N
N O PA I N
Stacy Kvernmo
@funstacy