Large Scale CSS Refactoring at trivago

Large Scale CSS Refactoring at trivago
@pistenprinz

Ironman release picture
Crazy Guy
Talking to you  
right now
Does something
with frontend at
trivago
Loves giving
presentations
U.Bolt
Performance
Unicorn

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

Ironman - Tech Context 
The Big Picture

#1
Establish design and 
code consistency
Introduce a Frontend / Design System into the trivago
hotel search

#2
Improve code quality and
maintainability
Reduce technical debt

#3
Provide base for modern &
sustainable UI rebuild
Build modern applications fast

The former Case Study 
A Pattern Library and Atomic Design

The old company pages 
Built without Design Thinking and Atomic Design

The relaunched site 
Built with Design Thinking and Atomic Design

The ﬁrst Redesigns 
Company Pages and Quality Test Intro Page

Where we come from
What happened since 2012

Speciﬁcity graph 2012 
The speciﬁcity wall

–Christian Bauer
„Zitat hier eingeben.“

Graph before ironman 
Way better, but still …
peaks at the beginning
of the stylesheet

Before Ironman
The Pain Points

#1
Sprites were out of control
We built Frankenstein with Icons

#2
Creepy Render Bugs
No, i don’t render your site

#3
Too much CSS
How many Selectors do you use? ALL!

#4
Desktop ﬁrst approach
Oh you poor mobile devices

#5
Inconsistency and missing
Styleguide
Or how to create ﬁfty shades of grey or anything else

Code / Process Audits
• IE7 support
• Layout built on reset.css
• too complex CSS structure

#6
Overly complex CSS/DOM
structure
div, div, div, span, span, span

Ironman - the scope
The three disciplines

#1
Normalize.css incl. border-
box switch
Replace reset.css and remove content-box for box-sizing

#2
Mobile ﬁrst switch
Rewrite all media queries

#3
Replace image sprites with
SVGs and Fallback
Icon solution based on Grunticon

Ironman - the oath
What we had to promise

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

Ironman - technical details
What we had to refactor

#1
Refactor > 50k LOC of Scss
Rewrite / adapt the whole Scss Base

#2
Adapt dozens of templates
Markup changes needed for the new architecture

#3
Keep IE8 support
Yeah we still make money with IE8

#4
Remove all the Icons
coming from sprites
Prettify Frankenstein

#5
Extensive Device-Testing
Re-Test the application on all possible device

#6
Do it four weeks
Time is limited

Ironman - the business side
Management <3 refactoring. Not. </3

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

How to tell management that you need you need 4 weeks of feature
freeze and the User Interface will exactly look the same afterwards?

#1
Be a salesman- Sell it!
Prove it! Show beneﬁts!
Argue!

#2
Do it in 3 weeks!
Meet the deadline

#3
Don’t only think technically!
Think like a business person

Ironman - the process
How to integrate such a project

#?
How to integrate such a project
into an existing process?
Don’t harm the existing process

#?
How to handle management
expectation?
How to keep management up to date

#?
How to plan and estimate?
#noEstimates

Ironman - Agility
Possible ways to enforce culture

#1
People over process
The Agile Manifesto told ya

#2
Commitment over
estimation*
Interested to know when you are done, or interested to
be as fast as possible? 
*) only works if you meet the deadline

#3
Make progress transparent
& involve everybody
Update the stakeholders as often as possible

#4
Motivate people and let
them be awesome
Hire awesome people and get out of their way

Ironman - the numbers
People & processes

The People
One project team
… and inﬁnite supporters

9 Front-End Devs
3 Designers2 QA
Release
Engineer
Management
Back-End
Devs
Performance
Lead
UBolt
UXBolt
Product
Owner

The (lean) Process
3 Meetings +17 Stand-Ups
… and a Kanban board with 67 Post-Its and a slack-
channel is all we needed

Ironman - the numbers
Code and Outcome

889 commits in 3 weeks
16 commits per hour #YOLO

11973 LOC added
That is new / changed code

36668 LOC removed
Delete all the things (CSS,HTML,JS)

LOC from 52991 to 39755
Removed nearly 25% of the Scss Base

Replaced 451 Icons
Inﬁnite Icons replaced with SVG Icons

352 changed ﬁles
Inﬁnite Icons replaced with SVG Icons

• Foundation built to move the UI Development to the next level
• Better rendering performance on mobile
• Shared knowledge and understanding throughout, between all developers and the entire design/product team
CSS Selectors
Before and after
7009 vs 5605

CSS Rules
Before and after
5817 vs 4870

CSS Declarations
Before and after
13500 vs 11300

Showcase 1 
Desktop ﬁrst vs. Mobile ﬁrst

Showcase 2 
Sprite Wars vs. SVG beauty

Showcase 3 
HTTP Requests

Showcase 3 
HTTP requests

<3
Sorted the colors
Established and introduce a color palette

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

<3
Solved the icon chaos
Replaced the image sprites with a SVG icon set

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_circleinfo
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_excellentsmiley_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

Graph before Ironman 
Way better, but still …
peaks at the beginning
of the stylesheet

Graph after Ironman 
Improved curve
New CSS
base
Adapted old UI components.
Can now be easily rebuilt!
SVG

The metrics 
A/B Test results

The ﬁnal result 
Lets celebrate and merge

Retrospective 
What we have achieved - High Level
Summary

<3
Foundation built to move the
UI to the next level
Sustainable base to continue UI rebuild

<3
Better rendering
performance on mobile
No more poor mobile devices

<3
Shared knowledge and
understanding
Affects the developers and the entire design/product
team

<3
Optimized design-
development process
Atomic Design FTW

<3
New coding guidelines and
improved structure
ITCSS, BEM, OOCSS, …

Moving faster 
The time after

Faster Product Iterations 
Old version of the search result

The new item element 
New version built with pattern lab upon new base

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

Large Scale CSS Refactoring at trivago

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (7)

Similar a Large Scale CSS Refactoring at trivago

Similar a Large Scale CSS Refactoring at trivago (20)

Último

Último (20)

Large Scale CSS Refactoring at trivago