about:consistency lessons learned - the hard way

Christoph Reinartz - @pistenprinz

28 Mai 2015

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

specificity graph 2012 consistency is measurable

Christoph Reinartz - @pistenprinz

AND THEN I SAID TO THOSE GUYS AT TRIVAGO

TEAR DOWN THIS WALL OR I WILL DO IT!

• 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

Christoph Reinartz - @pistenprinz

fifty shades of grey or why to use color variables in sass

• 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

specificity graph 2012 consistency is measurable

Christoph Reinartz - @pistenprinz

specificity graph nowadays better curves

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