The document discusses lessons learned about maintaining consistency in CSS and Scss code at trivago. It describes how deep nesting and lack of coding styleguides led to spaghetti code that was difficult to maintain and scale. It then outlines iterative improvements made such as introducing a pattern library, code styleguides, and monitoring to measure and improve consistency over time.

1. about:consistency
lessons learned - the hard way
Christoph Reinartz - @pistenprinz
28 Mai 2015

2. .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

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
{ … }

4. specificity graph 2012
consistency is measurable
Christoph Reinartz - @pistenprinz

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

11. specificity graph 2012
consistency is measurable
Christoph Reinartz - @pistenprinz

12. specificity graph nowadays
better curves
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

14. Christoph Reinartz
Frontend Developer
@pistenprinz
thanks
i’m done
Christoph Reinartz - @pistenprinz

15. Slide 1:
https://www.flickr.com/photos/jef_safi/2271196842/
Slide 7:
https://www.flickr.com/photos/fcrippa/1423941532/
sources
Christoph Reinartz - @pistenprinz