/impeccable extract
Extract
Изведете компоненти за повторна употреба, токени и модели в дизайн системата.
Умението извлича само това, което се използва три или повече пъти с едно и също намерение. Две употреби не са модел, а миграцията винаги се случва в същата фаза.
Кога да се използва
/impeccable extract е за момента, когато вашата кодова база случайно се е превърнала в дизайн система. Повтарящи се стилове на бутони на 12 места. Три варианта на една и съща карта. Hex цветове, разпръснати навсякъде. Ръчно изработени разстояния, които случайно съвпадат със скала. Обърнете се към него, когато искате да консолидирате това отклонение в примитиви за повторна употреба.
Използвайте го след като продуктът е пуснал достатъчно функции, за да разкрие моделей. Преждевременното извличане създава абстракции, които не съответстват на реалността.
Как работи
Умението открива структурата на дизайн системата първо, след което идентифицира възможности за извличане:
- Токени: намират повтарящи се литерални стойности (цветове, разстояния, радиуси, сенки, размери на шрифтове). Предлагат имена на токени, добавят към системата с токени, заменят употреби.
- Компоненти: намират UI модели, които се повтарят с леки вариации (бутони, карти, входове, модални прозорци). Извличат в един компонент с варианти, мигрират извикващите.
- Композиционни модели: намират layout или взаимодействия модели, които се повтарят (редове на формуляри, групи ленти с инструменти, празни състояния). Извличат в композиционни примитиви.
- Типографски стилове: намират повтарящи се комбинации от font-size + weight + line-height. Извличат в текстови стилове.
- Анимационни модели: намират повтарящи се комбинации от изглаждане, продължителност или ключови кадри. Извличат в токени за движение.
Умението е предпазливо. То извлича само неща, използвани три или повече пъти, с едно и също намерение. Никога не извлича “защото може да се използва повторно по-късно”. Преждевременната абстракция е по-лоша от дублирането.
Пробвайте
/impeccable extract the button stylesОчакван резултат:
- Открити 14 инстанции на бутони в 8 файла
- 4 отделни варианта: основен (запълнен акцент), вторичен (с рамка), призрачен (само текст), деструктивен (запълнен червен)
- Всички 4 варианта използват същата скала за размери (малък, стандартен, голям)
- Извлечени в
<Button variant="primary" size="default">с токен-базирани стилове - Мигрирани 14 места на извикване, премахнати ~180 реда дублиран CSS
- Добавени 3 липсващи токена:
--button-radius,--button-padding-y,--button-padding-x
Клопки
- Извличане твърде рано. Две употреби не са модел. Три може да са. Изчакайте, докато моделът е очевиден.
- Прекомерно обобщаване. Извлеченият компонент трябва да съответства плътно на текущите случаи на употреба, не да предвижда всеки възможен бъдещ. Винаги можете да добавите варианти по-късно.
- Забравяне на миграцията. Извличане без миграция оставя стария дублиран код и създава трети начин за правене на същото нещо. Винаги мигрирайте в същата фаза.
- Извличане на неща, които се различават по намерение. Два бутона, които изглеждат сходно, но служат на различни цели (основно действие срещу връзка, стилизирана като бутон), вероятно трябва да останат отделни.