เวิร์กโฟลว์ CSS สำหรับ Frontend
สร้างสไตล์ UI ที่สวยงามตั้งแต่เริ่มต้นใน 5 ขั้นตอน
การสลับระหว่างเครื่องมือที่กระจัดกระจายขณะสร้าง UI เป็นการเสียเวลา เวิร์กโฟลว์นี้ครอบคลุมงาน CSS หลักตามลำดับที่สมเหตุสมผล ตั้งแต่การเลือกสีพื้นฐานไปจนถึงการกำหนดหน่วยที่ตอบสนอง เพื่อให้คุณสามารถสร้างสไตล์ภาพที่สอดคล้องกันได้
เลือกสีพื้นฐาน
ทุกอย่างใน UI มาจากพาเลตต์สี การกำหนดสีหลักและสีเน้นก่อนจะป้องกันค่าที่ไม่สอดคล้องกระจายอยู่ใน CSS
สร้างพื้นหลังแบบไล่ระดับ
พื้นหลังแบบไล่ระดับเพิ่มความลึกให้กับส่วน hero และการ์ด แต่การเขียนไวยากรณ์ CSS ด้วยมือนั้นเกิดข้อผิดพลาดง่ายและช้าในการทดสอบ
เพิ่มความลึกด้วยเงา
เงากำหนดลำดับชั้นระดับความสูง ปุ่ม การ์ด และ modal แต่ละอย่างต้องการความลึกเงาที่แตกต่างกันเพื่อให้ดูถูกต้อง
ปัดมุมให้โค้งมน
border-radius เป็นรายละเอียดที่ละเอียดอ่อนแต่สำคัญ ค่าที่ไม่สอดคล้องระหว่างคอมโพเนนต์ทำให้ UI ดูยังไม่เสร็จ
แปลงค่าพิกเซลเป็น REM
การใช้หน่วย rem แทน px ช่วยให้เลย์เอาต์เคารพการตั้งค่าขนาดฟอนต์ของผู้ใช้และปรับขนาดได้อย่างเข้าถึงได้
เคล็ดลับ
- กำหนดสีของคุณเป็น CSS custom properties (--color-primary: #...) เพื่อให้คุณต้องอัปเดตเพียงที่เดียว
- ใช้ scale ของ border-radius ที่สอดคล้องกัน (4px, 8px, 16px, 24px) แทนค่าสุ่มเพื่อให้คอมโพเนนต์ดูเข้ากัน
- กำหนดขนาดฟอนต์พื้นฐานใน :root และคำนวณค่า rem โดยอ้างอิงกับฐานนั้นเสมอเพื่อการปรับขนาดที่คาดเดาได้