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.

Transcript

1. Large Scale CSS Refactoring at trivago
   

   View Slide

2. since 2012
   twitter/medium
   @pistenprinz
   

   View Slide

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
   

   View Slide

4. Christoph Reinartz - @pistenprinz
   Ironman - Tech Context

   The Big Picture
   

   View Slide

5. Christoph Reinartz - @pistenprinz
   #1
   Establish design and code consistency
   Introduce a Frontend / Design System into the trivago hotel search
   

   View Slide

6. Christoph Reinartz - @pistenprinz
   #2
   Improve code quality and
   maintainability
   Reduce technical debt
   

   View Slide

7. Christoph Reinartz - @pistenprinz
   #3
   Provide base for modern & sustainable
   UI rebuild
   Build modern applications fast
   

   View Slide

8. Christoph Reinartz - @pistenprinz
   The former Case Study

   A Pattern Library and Atomic Design
   

   View Slide

9. Christoph Reinartz - @pistenprinz
   The old company pages

   Built without Design Thinking and Atomic Design
   

   View Slide

10. Christoph Reinartz - @pistenprinz
    The relaunched site

    Built with Design Thinking and Atomic Design
    

    View Slide

11. Christoph Reinartz - @pistenprinz
    The first Redesigns

    Company Pages and Quality Test Intro Page
    

    View Slide

12. Christoph Reinartz - @pistenprinz
    Where we come from
    What happened since 2012
    

    View Slide

13. Christoph Reinartz - @pistenprinz
    Specificity graph 2012

    The specificity wall
    

    View Slide

14. View Slide

15. View Slide

16. HTML5
    

    View Slide

17. Christoph Reinartz - @pistenprinz
    peaks at the beginning
    of the stylesheet
    Graph before Ironman

    Way better, but still…
    

    View Slide

18. Christoph Reinartz - @pistenprinz
    Before Ironman
    The Pain Points
    

    View Slide

19. Christoph Reinartz - @pistenprinz
    #1
    Sprites were out of control
    We built Frankenstein with Icons
    

    View Slide

20. View Slide

21. Christoph Reinartz - @pistenprinz
    #2
    Too much CSS
    How many Selectors do you use? ALL!
    

    View Slide

22. Christoph Reinartz - @pistenprinz
    #3
    Too much CSS
    How many Selectors do you use? ALL!
    

    View Slide

23. Christoph Reinartz - @pistenprinz
    #3
    Desktop first approach
    Oh you poor mobile devices
    

    View Slide

24. Christoph Reinartz - @pistenprinz
    #4
    Inconsistency and missing Styleguide
    Or how to create fifty shades of grey or anything else
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. Christoph Reinartz - @pistenprinz
    #5
    Overly complex CSS/DOM structure
    div, div, div, span, span, span
    

    View Slide

30. Christoph Reinartz - @pistenprinz
    #6
    Too much confusion in code
    Scary comments
    

    View Slide

31. View Slide

32. Christoph Reinartz - @pistenprinz
    Ironman - the scope
    The three disciplines and the project name
    

    View Slide

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]
    

    View Slide

34. Christoph Reinartz - @pistenprinz
    Normalize.css incl. border-box switch
    Replace reset.css and remove content-box for box-sizing
    

    View Slide

35. Christoph Reinartz - @pistenprinz
    Mobile first switch
    Rewrite all media queries
    

    View Slide

36. Christoph Reinartz - @pistenprinz
    Replace image sprites with SVGs and
    Fallback
    Icon solution based on Grunticon
    

    View Slide

37. Christoph Reinartz - @pistenprinz
    Ironman - the oath
    What we had to promise
    

    View Slide

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
    

    View Slide

39. Christoph Reinartz - @pistenprinz
    Stop at components layer

    Fix the things at the root first
    

    View Slide

40. Christoph Reinartz - @pistenprinz
    Ironman - technical details
    What we did
    

    View Slide

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
    

    View Slide

42. Christoph Reinartz - @pistenprinz
    settings
    tools
    generic
    elements
    objects
    components
    trumps
    

    View Slide

43. Christoph Reinartz - @pistenprinz
    _declarations
    includes
    mixins
    mobile
    includes
    layout.scss
    elements.scss
    modules.scss
    dealform.scss
    

    View Slide

44. Christoph Reinartz - @pistenprinz
    #1
    Refactor > 50k LOC of Scss
    Rewrite / adapt the whole Scss Base
    

    View Slide

45. Christoph Reinartz - @pistenprinz
    #2
    Adapt dozens of templates
    Markup changes needed for the new architecture
    

    View Slide

46. Christoph Reinartz - @pistenprinz
    #3
    Remove all the Icons coming from
    sprites
    Prettify Frankenstein
    

    View Slide

47. Christoph Reinartz - @pistenprinz
    #4
    Extensive Device-Testing
    Re-Test the application on all possible device
    

    View Slide

48. Christoph Reinartz - @pistenprinz
    #5
    Do it in four weeks
    Time is limited
    

    View Slide

49. Christoph Reinartz - @pistenprinz
    Ironman - the business side
    Management <3 refactoring. Not. 3
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

52. Christoph Reinartz - @pistenprinz
    #1
    Be a salesman- Sell it! Proof it! Show
    benefits!
    Argue!
    

    View Slide

53. Christoph Reinartz - @pistenprinz
    #2
    Don’t only think technically!
    Think like a business person
    

    View Slide

54. Christoph Reinartz - @pistenprinz
    Ironman - the numbers
    People & processes
    

    View Slide

55. View Slide

56. Christoph Reinartz - @pistenprinz
    The People
    One project team
    … and infinite supporters
    

    View Slide

57. Christoph Reinartz - @pistenprinz
    9 Front-End Devs
    3 Designers
    2 QA
    Release
    Engineer
    Management
    Back-End
    Devs
    Performance
    Lead
    UBolt
    UXBolt
    Product
    Owner
    

    View Slide

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
    

    View Slide

59. Christoph Reinartz - @pistenprinz
    Ironman - the numbers
    Code and Outcome
    

    View Slide

60. Christoph Reinartz - @pistenprinz
    889 commits in 3 weeks
    16 commits per hour #YOLO
    

    View Slide

61. Christoph Reinartz - @pistenprinz
    11973 LOC added
    That is new / changed code
    

    View Slide

62. Christoph Reinartz - @pistenprinz
    36668 LOC removed
    Delete all the things (CSS,HTML,JS)
    

    View Slide

63. Christoph Reinartz - @pistenprinz
    LOC from 52991 to 39755
    Removed nearly 25% of the Scss Base
    

    View Slide

64. Christoph Reinartz - @pistenprinz
    Replaced 451 Icons
    Infinite Icons replaced with SVG Icons
    

    View Slide

65. Christoph Reinartz - @pistenprinz
    352 changed files
    Twig, Scss, JS, PHP
    

    View Slide

66. Christoph Reinartz - @pistenprinz
    Showcase 1

    Desktop first vs. Mobile first
    

    View Slide

67. View Slide

68. View Slide

69. Christoph Reinartz - @pistenprinz
    Showcase 2

    Sprite Wars vs. SVG beauty
    

    View Slide

70. View Slide

71. View Slide

72. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP Requests
    

    View Slide

73. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP requests
    

    View Slide

74. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP requests
    

    View Slide

75. Christoph Reinartz - @pistenprinz
    <3
    Sorted the colors
    Established and introduce a color palette
    

    View Slide

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
    

    View Slide

77. View Slide

78. Christoph Reinartz - @pistenprinz
    <3
    Solved the icon chaos
    Replaced the image sprites with a SVG icon set
    

    View Slide

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
    

    View Slide

80. Christoph Reinartz - @pistenprinz
    peaks at the beginning
    of the stylesheet
    Graph before Ironman

    Way better, but still…
    

    View Slide

81. Christoph Reinartz - @pistenprinz
    New CSS
    base
    Adapted old UI components.
    Can now be easily rebuilt!
    SVG
    Graph after Ironman

    Improved curve…
    

    View Slide

82. Christoph Reinartz - @pistenprinz
    The metrics

    A/B Test results
    

    View Slide

83. Christoph Reinartz - @pistenprinz
    Let’s celebrate

    

    View Slide

84. Christoph Reinartz - @pistenprinz
    Moving faster

    The time after - Time for the components
    

    View Slide

85. Christoph Reinartz - @pistenprinz
    Faster Product Iterations

    Old version of the search result component
    

    View Slide

86. Christoph Reinartz - @pistenprinz
    The new item element

    New version built with pattern lab upon new base
    

    View Slide

87. Christoph Reinartz - @pistenprinz
    Move faster than ever before

    Qualify features with faster iterations
    

    View Slide

88. Christoph Reinartz - @pistenprinz
    Thanks

    I’m done
    Christoph Reinartz
    Team Lead UI/UX Engineering
    @pistenprinz
    

    View Slide