3. 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
{ … }
5. AND THEN I SAID TO THOSE GUYS AT TRIVAGO
TEAR DOWN THIS WALL OR I WILL DO IT!
6. • 70k LOC Scss with deep nesting
• Incomplete Coding Styleguides
• Incomplete Code Analysis
• Missing Workflow & Styleguide
audits
architecture & processes
Christoph Reinartz - @pistenprinz
7. 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
8. Christoph Reinartz - @pistenprinz
fifty shades of grey
or why to use color variables in sass
9. • 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
10. • 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
13. • 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