No pain, no gain. CSS Code Reviews FTW.

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.

Transcript

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 K G 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 Board Rietveld # 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