about:consistency
lessons learned - the hard way
Christoph Reinartz - @pistenprinz
28 Mai 2015
Slide 2
Slide 2 text
.gradient_bright_hover:hover,
.gradient_bright_hover:hover *,
.gradient_dark_hover:hover,
.gradient_dark_hover:hover * {
color:#fff !important
}
show me your css
not just an edge case
Christoph Reinartz - @pistenprinz
Slide 3
Slide 3 text
specifically…
may i introduce you to the world’s creepiest cascade?
Christoph Reinartz - @pistenprinz
#banner_topnav div.tab_links li
div.dropdown table.localization
a.plain:hover
{ … }
Slide 4
Slide 4 text
specificity graph 2012
consistency is measurable
Christoph Reinartz - @pistenprinz
Slide 5
Slide 5 text
AND THEN I SAID TO THOSE GUYS AT TRIVAGO
TEAR DOWN THIS WALL OR I WILL DO IT!
Slide 6
Slide 6 text
• 70k LOC Scss with deep nesting
• Incomplete Coding Styleguides
• Incomplete Code Analysis
• Missing Workflow & Styleguide
audits
architecture & processes
Christoph Reinartz - @pistenprinz
Slide 7
Slide 7 text
the result
spaghetti code (not delicious!!)
• longer development times
• many bugfixes needed - instable UI
• hard to maintain consistency
• issues with scalability and reusability
Christoph Reinartz - @pistenprinz
Slide 8
Slide 8 text
Christoph Reinartz - @pistenprinz
fifty shades of grey
or why to use color variables in sass
Slide 9
Slide 9 text
• about 50 features per release cycle
• about 60 devs working on the core product
• ~ 80 concurrent layout variation A/B tests
• ~ 4 billion requests per months
• 50 platforms
the trivago scale
some numbers
Christoph Reinartz - @pistenprinz
Slide 10
Slide 10 text
• Prototype and bootstrap code with design
facelifts
• Code Styleguide and Code linters
• Styleguides generated with KSS for bigger
Features in 2013
• Monitoring for CSS
on the way
iterative improvements
Christoph Reinartz - @pistenprinz
Slide 11
Slide 11 text
specificity graph 2012
consistency is measurable
Christoph Reinartz - @pistenprinz
Slide 12
Slide 12 text
specificity graph nowadays
better curves
Christoph Reinartz - @pistenprinz
Slide 13
Slide 13 text
• Build solid CSS framework base
• Introduced pattern library at trivago
• Massive workflow improvements and more
visibility
• Proof of concept for Living Design Systems
current status
status quo
Christoph Reinartz - @pistenprinz
Slide 14
Slide 14 text
Christoph Reinartz
Frontend Developer
@pistenprinz
thanks
i’m done
Christoph Reinartz - @pistenprinz