Extract

Mikor használd

A /impeccable extract abban a pillanatban jön jól, amikor a kódbázisodból véletlenül dizájnrendszer lett. Ismétlődő gombstílusok 12 helyen. Három változata ugyanannak a kártyának. Hex-színek szétszórva. Kézzel gyártott térközök, amelyek véletlenül illeszkednek egy skálára. Nyúlj hozzá, amikor ezt a sodródást újrafelhasználható primitívekbe szeretnéd összevonni.

Használd, miután egy termék elég funkciót szállított ahhoz, hogy a minták kiderüljenek. A korai kinyerés olyan absztrakciókat hoz létre, amelyek nem fedik a valóságot.

Hogyan működik

A szakértelem először felfedezi a dizájnrendszer szerkezetét, majd azonosítja a kinyerési lehetőségeket:

1. Tokenek: ismétlődő literálértékek (színek, térközök, sugarak, árnyékok, betűméretek) keresése. Tokennevek javaslása, hozzáadás a tokenrendszerhez, használatok cseréje.
2. Komponensek: ismétlődő UI-minták keresése, amelyek kis eltéréssel fordulnak elő (gombok, kártyák, beviteli mezők, modálok). Kinyerés egyetlen komponensbe változatokkal, hívóhelyek migrálása.
3. Kompozíciós minták: ismétlődő elrendezési vagy interakciós minták (formsorok, eszköztár-csoportok, üres állapotok). Kinyerés kompozíciós primitívekbe.
4. Szövegstílusok: ismétlődő betűméret + vastagság + sormagasság kombinációk. Kinyerés szövegstílusokba.
5. Animációs minták: ismétlődő enyhítési, időtartam- vagy kulcskocka-kombinációk. Kinyerés mozgás tokenekbe.

A szakértelem óvatos. Csak olyan dolgokat von ki, amelyek három vagy több alkalommal fordulnak elő, ugyanazzal a szándékkal. Soha nem von ki „azért, mert esetleg később is kellene”. A korai absztrakció rosszabb, mint a duplikáció.

Próbáld ki

/impeccable extract the button styles

Várható kimenet:

• 14 gurba példány található 8 fájlban
• 4 különálló változat: elsődleges (kitöltött akcentus), másodlagos (keretezett), szellem (csak szöveg), pusztító (kitöltött piros)
• Mind a 4 változat ugyanazt a méretskáát használja (kicsi, alapértelmezett, nagy)
• Kinyerve <Button variant="primary" size="default"> formátumba tokenvezérelt stílusokkal
• 14 hívóhely migrálva, ~180 sor duplikált CSS eltávolítva
• 3 hiányzó token hozzáadva: --button-radius, --button-padding-y, --button-padding-x

Gyakori buktatók

• Túl korai kinyerés. Két használat nem minta. Három lehet az. Várj, amíg a minta nyilvánvaló.
• Túlzott általánosítás. A kinyert komponensnek szorosan illeszkednie kell az aktuális felhasználási esetekhez, nem kell minden lehetséges jövőbelit előre látnia. Később mindig hozzáadhatsz változatokat.
• A migráció elfelejtése. A kinyerés migráció nélkül maga körül hagyja a régi duplikált kódot, és létrehoz egy harmadik módot is ugyanannak a dolognak a megoldására. Mindig migrálj ugyanabban a menetben.
• Olyan dolgok kinyerése, amelyek szándékban eltérnek. Két gomb, amely hasonlóan néz ki, de más célt szolgál (elsődleges művelet vs. gombként formázott hivatkozás), valószínűleg maradjon külön.