Save 37% off PRO during our Black Friday Sale! »

Large Scale CSS Refactoring

Large Scale CSS Refactoring

Project Ironman: the technical migration of the trivago hotel search’s existing CSS core.

Keeping technical debt low while developing a CSS base on a large scale project is a tough challenge. Even more exciting is to refactor existing CSS / frontend foundations which became cluttered.

Running into into consistency issues between code and design which slows down the development of user interface iterations is a common problem in fast growing applications when the development doesn’t follow efficient guidelines, styleguides and utilizes an efficient process. At the beginning of 2015 we began establishing a design/frontend system and improving our design-development workflow at trivago. We introduced a pattern library, started utilizing atomic design in our workflow, created new coding guidelines, and adapted several methodologies like BEM and ITCSS in order to support us in maintaining and developing our CSS/UI on a large scale.

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

May 28, 2016
Tweet

Transcript

  1. Large Scale CSS Refactoring at trivago

  2. since 2012 twitter/medium @pistenprinz

  3. 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
  4. Christoph Reinartz - @pistenprinz Ironman - Tech Context
 The Big

    Picture
  5. Christoph Reinartz - @pistenprinz #1 Establish design and code consistency

    Introduce a Frontend / Design System into the trivago hotel search
  6. Christoph Reinartz - @pistenprinz #2 Improve code quality and maintainability

    Reduce technical debt
  7. Christoph Reinartz - @pistenprinz #3 Provide base for modern &

    sustainable UI rebuild Build modern applications fast
  8. Christoph Reinartz - @pistenprinz The former Case Study
 A Pattern

    Library and Atomic Design
  9. Christoph Reinartz - @pistenprinz The old company pages
 Built without

    Design Thinking and Atomic Design
  10. Christoph Reinartz - @pistenprinz The relaunched site
 Built with Design

    Thinking and Atomic Design
  11. Christoph Reinartz - @pistenprinz The first Redesigns
 Company Pages and

    Quality Test Intro Page
  12. Christoph Reinartz - @pistenprinz Where we come from What happened

    since 2012
  13. Christoph Reinartz - @pistenprinz Specificity graph 2012
 The specificity wall

  14. None
  15. None
  16. HTML5

  17. Christoph Reinartz - @pistenprinz peaks at the beginning of the

    stylesheet Graph before Ironman
 Way better, but still…
  18. Christoph Reinartz - @pistenprinz Before Ironman The Pain Points

  19. Christoph Reinartz - @pistenprinz #1 Sprites were out of control

    We built Frankenstein with Icons
  20. None
  21. Christoph Reinartz - @pistenprinz #2 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
  25. None
  26. None
  27. None
  28. None
  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
  31. None
  32. Christoph Reinartz - @pistenprinz Ironman - the scope The three

    disciplines and the project name
  33. Christoph Reinartz - @pistenprinz New CSS Core Old CSS Core

    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 improved legacy / fallback handling [something]
  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 which was developed with the Pattern Library without changing the appearance of the site
  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 Adapt dozens of templates Markup

    changes needed for the new architecture
  46. Christoph Reinartz - @pistenprinz #3 Remove all the Icons coming

    from sprites Prettify Frankenstein
  47. Christoph Reinartz - @pistenprinz #4 Extensive Device-Testing Re-Test the application

    on all possible device
  48. Christoph Reinartz - @pistenprinz #5 Do it in four weeks

    Time is limited
  49. Christoph Reinartz - @pistenprinz Ironman - the business side Management

    <3 refactoring. Not. </3
  50. 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
  51. 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?
  52. Christoph Reinartz - @pistenprinz #1 Be a salesman- Sell it!

    Proof it! Show benefits! Argue!
  53. Christoph Reinartz - @pistenprinz #2 Don’t only think technically! Think

    like a business person
  54. Christoph Reinartz - @pistenprinz Ironman - the numbers People &

    processes
  55. None
  56. Christoph Reinartz - @pistenprinz The People One project team …

    and infinite supporters
  57. Christoph Reinartz - @pistenprinz 9 Front-End Devs 3 Designers 2

    QA Release Engineer Management Back-End Devs Performance Lead UBolt UXBolt Product Owner
  58. Christoph Reinartz - @pistenprinz The (lean) Process 3 Meetings +17

    Stand-Ups … and a Kanban board with 67 Post-Its and a slack-channel is all we needed
  59. Christoph Reinartz - @pistenprinz Ironman - the numbers Code and

    Outcome
  60. Christoph Reinartz - @pistenprinz 889 commits in 3 weeks 16

    commits per hour #YOLO
  61. Christoph Reinartz - @pistenprinz 11973 LOC added That is new

    / changed code
  62. Christoph Reinartz - @pistenprinz 36668 LOC removed Delete all the

    things (CSS,HTML,JS)
  63. Christoph Reinartz - @pistenprinz LOC from 52991 to 39755 Removed

    nearly 25% of the Scss Base
  64. Christoph Reinartz - @pistenprinz Replaced 451 Icons Infinite Icons replaced

    with SVG Icons
  65. Christoph Reinartz - @pistenprinz 352 changed files Twig, Scss, JS,

    PHP
  66. Christoph Reinartz - @pistenprinz Showcase 1
 Desktop first vs. Mobile

    first
  67. None
  68. None
  69. Christoph Reinartz - @pistenprinz Showcase 2
 Sprite Wars vs. SVG

    beauty
  70. None
  71. None
  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
  87. Christoph Reinartz - @pistenprinz Move faster than ever before
 Qualify

    features with faster iterations
  88. Christoph Reinartz - @pistenprinz Thanks
 I’m done Christoph Reinartz Team

    Lead UI/UX Engineering @pistenprinz