No pain, no gain. CSS Code Reviews FTW.

10,931 views

Published on

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.

Published in: Software, Technology

No pain, no gain. CSS Code Reviews FTW.

  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

×