.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
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 { … }
• 70k LOC Scss with deep nesting • Incomplete Coding Styleguides • Incomplete Code Analysis • Missing Workflow & Styleguide
audits architecture & processes
Christoph Reinartz - @pistenprinz
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
• 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
• 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
• 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
Christoph Reinartz Frontend Developer
@pistenprinz
thanks i’m done
Christoph Reinartz - @pistenprinz
Slide 1: https://www.flickr.com/photos/jef_safi/2271196842/
Slide 7: https://www.flickr.com/photos/fcrippa/1423941532/
sources
Christoph Reinartz - @pistenprinz