SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
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

Más contenido relacionado

Destacado

Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtChristoph Reinartz
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionChristoph Reinartz
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesPeter Rozek
 
Trivago - NOAH12 London
Trivago - NOAH12 LondonTrivago - NOAH12 London
Trivago - NOAH12 LondonNOAH Advisors
 
Trivago - NOAH12 San Francisco
Trivago - NOAH12 San FranciscoTrivago - NOAH12 San Francisco
Trivago - NOAH12 San FranciscoNOAH Advisors
 
property in Neemrana-Ashu Group,7503367689
property in Neemrana-Ashu Group,7503367689property in Neemrana-Ashu Group,7503367689
property in Neemrana-Ashu Group,7503367689sahilkharkara5
 
Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252sahilkharkara5
 
Administration of Electrolytes in traumatic injuries
Administration of  Electrolytes in traumatic injuries Administration of  Electrolytes in traumatic injuries
Administration of Electrolytes in traumatic injuries Sujay Patil
 
Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252sahilkharkara5
 

Destacado (10)

Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
 
Meteor WWNRW Intro
Meteor WWNRW IntroMeteor WWNRW Intro
Meteor WWNRW Intro
 
Trivago - NOAH12 London
Trivago - NOAH12 LondonTrivago - NOAH12 London
Trivago - NOAH12 London
 
Trivago - NOAH12 San Francisco
Trivago - NOAH12 San FranciscoTrivago - NOAH12 San Francisco
Trivago - NOAH12 San Francisco
 
property in Neemrana-Ashu Group,7503367689
property in Neemrana-Ashu Group,7503367689property in Neemrana-Ashu Group,7503367689
property in Neemrana-Ashu Group,7503367689
 
Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252
 
Administration of Electrolytes in traumatic injuries
Administration of  Electrolytes in traumatic injuries Administration of  Electrolytes in traumatic injuries
Administration of Electrolytes in traumatic injuries
 
Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252Plots in Neemrana-Behror,8459137252
Plots in Neemrana-Behror,8459137252
 

Similar a about:consistency - lesson learned: the hard way

Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterda...
Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterda...Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterda...
Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterda...Codemotion
 
What is quality code? From cruft to craft
What is quality code? From cruft to craftWhat is quality code? From cruft to craft
What is quality code? From cruft to craftNick DeNardis
 
Maturity Mapping - Intro to Wardley Mapping, Social Practice Theory and Matur...
Maturity Mapping - Intro to Wardley Mapping, Social Practice Theory and Matur...Maturity Mapping - Intro to Wardley Mapping, Social Practice Theory and Matur...
Maturity Mapping - Intro to Wardley Mapping, Social Practice Theory and Matur...Chris McDermott
 
KubeCon EU 2022: From Kubernetes to PaaS to Err What's Next
KubeCon EU 2022: From Kubernetes to PaaS to Err What's NextKubeCon EU 2022: From Kubernetes to PaaS to Err What's Next
KubeCon EU 2022: From Kubernetes to PaaS to Err What's NextDaniel Bryant
 
SPSNL17 - Getting started with SharePoint development for the reluctant IT Pr...
SPSNL17 - Getting started with SharePoint development for the reluctant IT Pr...SPSNL17 - Getting started with SharePoint development for the reluctant IT Pr...
SPSNL17 - Getting started with SharePoint development for the reluctant IT Pr...DIWUG
 
One and Done Updates with Custom Post Types
One and Done Updates with Custom Post TypesOne and Done Updates with Custom Post Types
One and Done Updates with Custom Post Typesrdivi
 
Twitter for C++ Programmers
Twitter for C++ ProgrammersTwitter for C++ Programmers
Twitter for C++ ProgrammersAndrey Karpov
 
Time is an asset. delay is a cost (London Limited WiP Society)
Time is an asset. delay is a cost (London Limited WiP Society)Time is an asset. delay is a cost (London Limited WiP Society)
Time is an asset. delay is a cost (London Limited WiP Society)Andy Carmichael
 
Using Tomorrow's CSS Today
Using Tomorrow's CSS TodayUsing Tomorrow's CSS Today
Using Tomorrow's CSS TodayBrian Graves
 
Confab Higher Ed 2016: Better Strategy Through Structure
Confab Higher Ed 2016: Better Strategy Through StructureConfab Higher Ed 2016: Better Strategy Through Structure
Confab Higher Ed 2016: Better Strategy Through StructureLisa Maria Martin
 
Lipstick on a pig ias16
Lipstick on a pig ias16Lipstick on a pig ias16
Lipstick on a pig ias16Traci Lepore
 
Fall 22: "From Kubernetes to PaaS to... err, what's next"
Fall 22: "From Kubernetes to PaaS to... err, what's next"Fall 22: "From Kubernetes to PaaS to... err, what's next"
Fall 22: "From Kubernetes to PaaS to... err, what's next"Daniel Bryant
 

Similar a about:consistency - lesson learned: the hard way (13)

Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterda...
Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterda...Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterda...
Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterda...
 
Controlling Content Migrations
Controlling Content MigrationsControlling Content Migrations
Controlling Content Migrations
 
What is quality code? From cruft to craft
What is quality code? From cruft to craftWhat is quality code? From cruft to craft
What is quality code? From cruft to craft
 
Maturity Mapping - Intro to Wardley Mapping, Social Practice Theory and Matur...
Maturity Mapping - Intro to Wardley Mapping, Social Practice Theory and Matur...Maturity Mapping - Intro to Wardley Mapping, Social Practice Theory and Matur...
Maturity Mapping - Intro to Wardley Mapping, Social Practice Theory and Matur...
 
KubeCon EU 2022: From Kubernetes to PaaS to Err What's Next
KubeCon EU 2022: From Kubernetes to PaaS to Err What's NextKubeCon EU 2022: From Kubernetes to PaaS to Err What's Next
KubeCon EU 2022: From Kubernetes to PaaS to Err What's Next
 
SPSNL17 - Getting started with SharePoint development for the reluctant IT Pr...
SPSNL17 - Getting started with SharePoint development for the reluctant IT Pr...SPSNL17 - Getting started with SharePoint development for the reluctant IT Pr...
SPSNL17 - Getting started with SharePoint development for the reluctant IT Pr...
 
One and Done Updates with Custom Post Types
One and Done Updates with Custom Post TypesOne and Done Updates with Custom Post Types
One and Done Updates with Custom Post Types
 
Twitter for C++ Programmers
Twitter for C++ ProgrammersTwitter for C++ Programmers
Twitter for C++ Programmers
 
Time is an asset. delay is a cost (London Limited WiP Society)
Time is an asset. delay is a cost (London Limited WiP Society)Time is an asset. delay is a cost (London Limited WiP Society)
Time is an asset. delay is a cost (London Limited WiP Society)
 
Using Tomorrow's CSS Today
Using Tomorrow's CSS TodayUsing Tomorrow's CSS Today
Using Tomorrow's CSS Today
 
Confab Higher Ed 2016: Better Strategy Through Structure
Confab Higher Ed 2016: Better Strategy Through StructureConfab Higher Ed 2016: Better Strategy Through Structure
Confab Higher Ed 2016: Better Strategy Through Structure
 
Lipstick on a pig ias16
Lipstick on a pig ias16Lipstick on a pig ias16
Lipstick on a pig ias16
 
Fall 22: "From Kubernetes to PaaS to... err, what's next"
Fall 22: "From Kubernetes to PaaS to... err, what's next"Fall 22: "From Kubernetes to PaaS to... err, what's next"
Fall 22: "From Kubernetes to PaaS to... err, what's next"
 

Último

Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsJaydeep Chhasatia
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Neo4j
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxPrakarsh -
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Projectwajrcs
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9Jürgen Gutsch
 

Último (20)

Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Sustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire ThornewillSustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire Thornewill
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptx
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9
 

about:consistency - lesson learned: the hard way