/impeccable extract
Extract
ดึงคอมโพเนนต์ โทเคน และรูปแบบที่ใช้ซ้ำได้เข้าสู่ระบบการออกแบบ
สกิลดึงเฉพาะสิ่งที่ใช้สามครั้งขึ้นไปด้วยเจตนาเดียวกัน สองการใช้ไม่ใช่รูปแบบ และการย้ายเกิดขึ้นในพาสเดียวกันเสมอ
เมื่อไรควรใช้
/impeccable extract มีไว้สำหรับช่วงเวลาที่โค้ดเบสของคุณกลายเป็นระบบการออกแบบโดยไม่ตั้งใจ สไตล์ปุ่มที่ซ้ำกันใน 12 ที่ ตัวแปรการ์ดสามแบบของการ์ดเดียวกัน ค่า hex กระจายไปทั่ว ระยะห่างที่ทำด้วยมือที่บังเอิญตรงกับสเกล ใช้เมื่อคุณต้องการรวมศูนย์การเบี่ยงเบนนี้เป็น primitives ที่ใช้ซ้ำได้
ใช้หลังผลิตภัณฑ์ส่งมอบฟีเจอร์เพียงพอที่จะเปิดเผยรูปแบบ การดึงล่วงหน้าสร้างสิ่งที่เป็นนามธรรมที่ไม่ตรงกับความเป็นจริง
วิธีการทำงาน
สกิลค้นพบโครงสร้างระบบการออกแบบก่อน แล้วระบุโอกาสในการดึง:
- โทเคน: หาค่า literal ที่ซ้ำกัน (สี ระยะห่าง รัศมี เงา ขนาดฟอนต์) เสนอชื่อโทเคน เพิ่มเข้าระบบโทเคน แทนที่การใช้
- คอมโพเนนต์: หารูปแบบ UI ที่ซ้ำกันด้วยความแตกต่างเล็กน้อย (ปุ่ม การ์ด อินพุต โมดัล) ดึงเป็นคอมโพเนนต์เดียวพร้อมตัวแปร ย้ายผู้เรียก
- รูปแบบคอมโพซิชัน: หารูปแบบเลย์เอาต์หรือการโต้ตอบที่ซ้ำกัน (แถวฟอร์ม กลุ่มแถบเครื่องมือ สเตทว่าง) ดึงเป็น primitives คอมโพซิชัน
- สไตล์ข้อความ: หาชุด font-size + weight + line-height ที่ซ้ำกัน ดึงเป็นสไตล์ข้อความ
- รูปแบบแอนิเมชัน: หาชุด easing, duration หรือ keyframe ที่ซ้ำกัน ดึงเป็นโทเคนการเคลื่อนไหว
สกิลระมัดระวัง มันดึงเฉพาะสิ่งที่ใช้สามครั้งขึ้นไป ด้วยเจตนาเดียวกัน มันไม่เคยดึง “เพราะอาจใช้ซ้ำในภายหลัง” สิ่งที่เป็นนามธรรมล่วงหน้าแย่กว่าการทำซ้ำ
ลองใช้งาน
/impeccable extract the button stylesผลลัพธ์ที่คาดหวัง:
- พบอินสแตนซ์ปุ่ม 14 อินสแตนซ์ใน 8 ไฟล์
- ตัวแปรที่แตกต่าง 4 แบบ: primary (เติมสีเน้น), secondary (มีขอบ), ghost (เฉพาะข้อความ), destructive (เติมสีแดง)
- ทั้ง 4 ตัวแปรใช้สเกลขนาดเดียวกัน (small, default, large)
- ดึงเป็น
<Button variant="primary" size="default">พร้อมสไตล์ที่ขับเคลื่อนด้วยโทเคน - ย้าย 14 call site ลบ CSS ที่ซ้ำกันประมาณ 180 บรรทัด
- เพิ่มโทเคนที่ขาดหาย 3 โทเคน:
--button-radius,--button-padding-y,--button-padding-x
ข้อควรระวัง
- ดึงเร็วเกินไป สองการใช้ไม่ใช่รูปแบบ สามอาจเป็น รอจนกว่ารูปแบบจะชัดเจน
- ทั่วไปเกินไป คอมโพเนนต์ที่ดึงควรตรงกับกรณีการใช้งานปัจจุบันอย่างใกล้ชิด ไม่ใช่คาดการณ์ทุกกรณีในอนาคตที่เป็นไปได้ คุณสามารถเพิ่มตัวแปรได้ภายหลังเสมอ
- ลืมการย้าย การดึงโดยไม่มีการย้ายทิ้งโค้ดที่ซ้ำเก่าไว้และสร้างวิธีที่สามในการทำสิ่งเดียวกัน ย้ายในพาสเดียวกันเสมอ
- ดึงสิ่งที่แตกต่างกันในเจตนา สองปุ่มที่ดูคล้ายกันแต่รับใช้วัตถุประสงค์ที่แตกต่างกัน (แอคชันหลัก vs ลิงก์ที่จัดสไตล์เป็นปุ่ม) น่าจะควรแยกกัน