CSS diff - jak na to, aniž by tě to štvalo

CSS soubory umí rychle narůst do tisíců řádků. A když víc lidí mění styly nebo refaktoruješ layout, chceš jasně vidět co se změnilo.

Proč je CSS diff otravný

• Whitespace - přidáš mezeru a diff vypadá jako změna
• Pořadí selektorů - může změnit specificity, ale diff to neví
• Vendor prefixy - duplicitní, ale nutné
• Shorthand vs longhand - margin: 10px vs margin-top: 10px; margin-right: 10px... - sémanticky stejné
• Media queries - rozdělené nebo consolidated

Prostě spoustu šumu.

Kdy to řeším

• Refaktoring - konsoliduju duplicate rules
• Code review - co přesně kolega změnil?
• Debugging - co mi přebíjí styly?
• Optimalizace - co je nepoužité?

Co používám

Pro rychlý pohled:

• Browser DevTools - computed styles, inheritance chain
• Code Diff s CSS zvýrazněním

Pro analýzu:

• PurgeCSS/UnCSS - najde nepoužité CSS
• CSS Stats - complexity, specificity, duplicity

Textový vs sémantický diff

Textový - ukazuje každý znak, včetně whitespace. Dobrý na code review.

Sémantický - normalizuje CSS, expanduje shorthands, seřadí properties. Lepší na verifikaci refaktoringu.

Většinou mi stačí textový, ale občas si CSS formátuji Prettierem předtím.

SCSS/Less

Porovnávej zdrojové soubory, ne zkompilované CSS.

Sleduj změny v:

• Variables
• Mixins
• Functions

Ty ovlivňují output víc než by člověk čekal.

Co sledovat extra

• Layout - flexbox, grid, positioning (rozbije to rozložení)
• Typography - font-size, line-height (čitelnost)
• Barvy - brand colors, accessibility contrast
• Breakpointy - media queries (mobile/desktop)
• Animace - timing (performance)

---

CSS diff není žádná věda, ale pomáhá udržet konzistentní design a chytit vizuální regrese dřív než jdou na produkci.

Potřebuješ rychle porovnat dva CSS snippety? Hoď je do Code Diff.