Large Scale CSS Refactoring

Project Ironman was the technical migration of the trivago hotel search’s existing CSS core to a pattern library based user interface. Backgrounds, insights, learnings and technical approaches of refactoring an existing CSS core of more than 50k lines of SCSS-Code on a large project.

Transcript

1. Project Ironman Large scale CSS refactoring Christoph Reinartz - ScotlandCSS - Edinburgh, June 1st 2016
2. Christoph Reinartz - @pistenprinz What is it?
 A description Project Ironman was the technical migration of the trivago hotel search's existing CSS core to a pattern library based user interface.* *) business translation for #refactorAllTheThings
3. Christoph Reinartz - @pistenprinz Ironman - Tech Context
 The Big Picture
4. Christoph Reinartz - @pistenprinz #1 Establish design and code consistency Introduce a Frontend / Design System
5. Christoph Reinartz - @pistenprinz #2 Improve code quality and maintainability Reduce technical debt
6. Christoph Reinartz - @pistenprinz #3 Provide base for modern & sustainable UI rebuild Build modern applications fast
7. Christoph Reinartz - @pistenprinz The former Case Study
 A Pattern Library and Atomic Design
8. Christoph Reinartz - @pistenprinz The old company pages
 Built without Design Thinking and Atomic Design
9. Christoph Reinartz - @pistenprinz The relaunched site
 Built with Design Thinking and Atomic Design
10. Christoph Reinartz - @pistenprinz The first Redesigns
 Company Pages and Quality Test Intro Page
11. Christoph Reinartz - @pistenprinz Where we come from What happened since 2012
12. Christoph Reinartz - @pistenprinz Specificity graph 2012
 The specificity wall
15. HTML5
16. Christoph Reinartz - @pistenprinz peaks at the beginning of the stylesheet Graph 2015 before Ironman
 Way better, but still…
17. Christoph Reinartz - @pistenprinz Before Ironman The Pain Points
18. Christoph Reinartz - @pistenprinz #1 Sprites were out of control We built Frankenstein with Icons
20. Christoph Reinartz - @pistenprinz #2 Too much CSS How many Selectors do you use? ALL!
21. Christoph Reinartz - @pistenprinz #3 Too much CSS How many Selectors do you use? ALL!
22. Christoph Reinartz - @pistenprinz #3 Too much CSS How many Selectors do you use? ALL!
23. Christoph Reinartz - @pistenprinz #3 Desktop first approach Oh you poor mobile devices
24. Christoph Reinartz - @pistenprinz #4 Inconsistency and missing Styleguide Or how to create fifty shades of grey or anything else
29. Christoph Reinartz - @pistenprinz #5 Overly complex CSS/DOM structure div, div, div, span, span, span
30. Christoph Reinartz - @pistenprinz #6 Too much confusion in code Scary comments
32. Christoph Reinartz - @pistenprinz Ironman - the scope The three disciplines and the project name
33. Christoph Reinartz - @pistenprinz New CSS Core Existing CSS normalize.css reset.css border-box content-box mobile first (min-width) desktop first (max-width) media queries inline in separate files embed SVG icon image sprites ITCSS layering [something] BEM, OOCSS [something] Post processing (MQPacker etc.) nothing
34. Christoph Reinartz - @pistenprinz Normalize.css incl. border-box switch Replace reset.css and remove content-box for box-sizing
35. Christoph Reinartz - @pistenprinz Mobile first switch Rewrite all media queries
36. Christoph Reinartz - @pistenprinz Replace image sprites with SVGs and Fallback Icon solution based on Grunticon
37. Christoph Reinartz - @pistenprinz Ironman - the oath What we had to promise
38. Christoph Reinartz - @pistenprinz Retain the existing Layout & Design integrate the new CSS framework base but …
39. Christoph Reinartz - @pistenprinz Stop at components layer
 Fix the things at the root first
40. Christoph Reinartz - @pistenprinz Ironman - technical details What we did
41. Christoph Reinartz - @pistenprinz _declarations includes mixins mobile includes layout.scss elements.scss modules.scss dealform.scss layout.scss elements.scss modules.scss dealform.scss
42. Christoph Reinartz - @pistenprinz settings tools generic elements objects components trumps
43. Christoph Reinartz - @pistenprinz _declarations includes mixins mobile includes layout.scss elements.scss modules.scss dealform.scss
44. Christoph Reinartz - @pistenprinz #1 Refactor > 50k LOC of Scss Rewrite / adapt the whole Scss Base
45. Christoph Reinartz - @pistenprinz #2 Remove all the Icons coming from sprites Prettify Frankenstein
46. Christoph Reinartz - @pistenprinz #3 Extensive Device-Testing Re-Test the application on all possible device
47. Christoph Reinartz - @pistenprinz #4 Do it in four weeks Time is limited
48. Christoph Reinartz - @pistenprinz Ironman - the business side Management <3 refactoring. Not. </3
49. Christoph Reinartz - @pistenprinz How to tell management that you need 4 weeks of feature freeze and the User Interface will look exactly the same afterwards? Developer goes Marketing
50. Code / Process Audits How to tell management that you need you need 4 weeks of feature freeze and the User Interface will exactly look the same afterwards?
51. Christoph Reinartz - @pistenprinz #1 Be a salesman- Sell it! Proof it! Show benefits! Argue!
52. Christoph Reinartz - @pistenprinz #2 Don’t only think technically! Think like a business person
53. Christoph Reinartz - @pistenprinz Ironman - the numbers People & processes
55. Christoph Reinartz - @pistenprinz The People One project team … and infinite supporters
56. Christoph Reinartz - @pistenprinz 9 Front-End Devs 3 Designers 2 QA Release Engineer Management Back-End Devs Performance Lead UBolt UXBolt Product Owner
57. Christoph Reinartz - @pistenprinz The (lean) Process 3 Meetings +17 Stand-Ups … and a slack-channel is all we needed
58. Christoph Reinartz - @pistenprinz Ironman - the numbers Code and Outcome
59. Christoph Reinartz - @pistenprinz 889 commits in 3 weeks 16 commits per hour #YOLO
60. Christoph Reinartz - @pistenprinz 11973 LOC added That is new / changed code
61. Christoph Reinartz - @pistenprinz 36668 LOC removed Delete all the things (CSS,HTML,JS)
62. Christoph Reinartz - @pistenprinz LOC from 52991 to 39755 Removed nearly 25% of the Scss Base
63. Christoph Reinartz - @pistenprinz .foo   Selectors reduced by 21% Down from 7009 to 5606
64. Christoph Reinartz - @pistenprinz {}     Rules reduced by 16% Down from 5817 to 4870
65. Christoph Reinartz - @pistenprinz property:value   Declarations reduced by 17% Down from 13500 to 11300
66. Christoph Reinartz - @pistenprinz Showcase 1
 Desktop first vs. Mobile first
69. Christoph Reinartz - @pistenprinz Showcase 2
 Sprite Wars vs. SVG beauty
72. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP Requests
73. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests
74. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests
75. Christoph Reinartz - @pistenprinz <3 Sorted the colors Established and introduce a color palette
76. trv-blue-light #3f9fc1 trv-red-light #d67763 trv-green-light #8cba3f trv-green-lighter #b2d17f trv-green-dark #4c7b00 trv-juri-light #697379 trv-juri-lighter #9ba2a6 trv-juri-lightest #ebeced trv-blue-dark #005f81 trv-blue #007fad trv-orange #f48f00 trv-red #c94a30 trv-orange-dark #b76b00 trv-orange-light #f6ab3f trv-blue-lightest #e5f2f6 trv-red-lightest #f9ecea trv-orange-lightest #fdf3e5 trv-red-dark #963724 trv-green #66a400 trv-juri #37454d trv-juri-dark #293339 16 12 18 16 12 12 18 12 18 16 * trv-juri-very-light #cdd0d2 trv-red-very-light #f1d1cb trv-green-very-light #d8e8bf trv-orange-very-light #fce3bf trv-blue-very-light #bfdfea trv-red-lighter #e4a49b trv-orange-lighter #f9c780 trv-blue-lighter #7fbfd6 trv-green-lightest #eff5e5
77. 2016 2015
78. Christoph Reinartz - @pistenprinz <3 Solved the icon chaos Replaced the image sprites with a SVG icon set
79. description details infobig hotelconnect smiley heart towel star pictures wifi spa beach breakfast pool pet golf tv family eco parking bed_single bed_double bed_small couple universal home menu share edit checkout checkin general rates faq_circle faq info_circle info arrow_right_circle arrow_left_circle arrow_down_circle arrow_up_circle arrow_right arrow_left arrow_down arrow_up tick exclamation x plus minus image media bag chair team candy journalist news hoteltest plus_circle minus_circle x_circle filter dashboard statistics hotel2 hotel travel2 travel booking hotelchain upload delete tick_circle exclamation_circle contact profile info product history giveback lock calendar search publisher career comment download map smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent level sort department poi_citycentre poi_airport poi_sight poi_conference poi_harbor poi_mainstation poi_nature poi_nightlife poi_sports filterreset join thin share2 movie call piechart diagram music multimedia wifi spa beach breakfast pool pet golf tv family eco parking bed_single bed_double bed_small couple universal home menu share edit checkout checkin general rates description details infobig hotelconnect smiley heart towel star pictures icn_profile icn_info icn_product icn_history icn_giveback icn_lock icn_calendar icn_search icn_publisher icn_career icn_comment icn_download icn_map icn_dashboard icn_statistics icn_hotel2 icn_hotel icn_travel2 icn_travel icn_booking icn_hotelchain icn_upload icn_delete icn_tick_circle exclamation_circle contact image media bag chair team candy journalist news hoteltest plus_circle minus_circle x_circle icn_filter arrow_right_circle arrow_left_circle arrow_down_circle arrow_up_circle arrow_right arrow_left arrow_down arrow_up tick exclamation x plus minus faq_circle faq info_circle info smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent level sort department poi_citycentre poi_airport poi_sight poi_conference poi_harbor poi_mainstation poi_nature poi_nightlife poi_sports join thin filterreset share2 movie call piechart diagram music multimedia
80. Christoph Reinartz - @pistenprinz peaks at the beginning of the stylesheet Graph before Ironman
 Way better, but still…
81. Christoph Reinartz - @pistenprinz New CSS base Adapted old UI components. Can now be easily rebuilt! SVG Graph after Ironman
 Improved curve…
82. Christoph Reinartz - @pistenprinz The metrics
 A/B Test results
83. Christoph Reinartz - @pistenprinz Let’s celebrate

84. Christoph Reinartz - @pistenprinz Moving faster
 The time after - Time for the components
85. Christoph Reinartz - @pistenprinz Faster Product Iterations
 Old version of the search result component
86. Christoph Reinartz - @pistenprinz The new item element
 New version built with pattern lab upon new base
88. Thanks! I’m done Christoph Reinartz - @pistenprinz