🎨 “CSS น้อยแต่ได้ผล — เคล็ดลับสร้างเว็บไซต์ดูดีโดยใช้โค้ดน้อยที่สุด” Kevin Powell นักพัฒนาและผู้สอนด้าน CSS ได้เผยแพร่บทความใน The Cascade ว่าด้วยการใช้ “CSS ให้น้อยที่สุด” เพื่อสร้างเว็บไซต์ที่ดูดีและใช้งานได้จริง โดยเน้นหลักการว่า “HTML ที่ดีคือจุดเริ่มต้นของเว็บไซต์ responsive โดยไม่ต้องพึ่ง CSS มากมาย” ซึ่งเหมาะสำหรับผู้เริ่มต้นหรือผู้ที่ต้องการสร้างหน้าเว็บแบบเรียบง่ายแต่มีประสิทธิภาพ เขาเริ่มจากการจัดการกับภาพและวิดีโอที่มักทำให้เกิดปัญหา overflow โดยใช้ CSS เพียงไม่กี่บรรทัด: 🔖 img, svg, video { max-width: 100%; display: block; } จากนั้นปรับปรุง typography ด้วยการใช้ฟอนต์ system-ui ซึ่งมีความเข้ากันได้ดีในทุกระบบ และปรับขนาดตัวอักษรกับ line-height เพื่อให้อ่านง่ายขึ้น: 🔖 body { font-family: system-ui; font-size: 1.25rem; line-height: 1.5; } เพื่อรองรับ dark mode ตามการตั้งค่าระบบของผู้ใช้ เขาใช้ property color-scheme: 🔖 html { color-scheme: light dark; } และสุดท้ายคือการจำกัดความกว้างของเนื้อหาเพื่อให้อ่านง่าย โดยใช้ main element และฟังก์ชัน min(): 🔖 main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; } ทั้งหมดนี้รวมกันแล้วเป็น CSS ที่สั้น กระชับ และสามารถใช้เป็นจุดเริ่มต้นสำหรับเว็บไซต์ที่ดูดีโดยไม่ต้องใช้เฟรมเวิร์กหรือไฟล์ขนาดใหญ่ ✅ ข้อมูลสำคัญจากบทความ ➡️ HTML ที่ดีสามารถสร้างเว็บไซต์ responsive ได้โดยไม่ต้องใช้ CSS มาก ➡️ ใช้ CSS เพียงไม่กี่บรรทัดเพื่อจัดการภาพและวิดีโอให้ไม่ overflow ➡️ ปรับ typography ด้วย system-ui, font-size 1.25rem และ line-height 1.5 ➡️ รองรับ dark mode ด้วย color-scheme: light dark ➡️ จำกัดความกว้างของเนื้อหาด้วย max-width: min(70ch, 100% - 4rem) ➡️ ใช้ margin-inline: auto เพื่อจัดเนื้อหาให้อยู่ตรงกลาง ➡️ CSS ทั้งหมดสามารถใช้กับหน้าเว็บเรียบง่ายได้ทันที ➡️ เหมาะสำหรับผู้เริ่มต้นหรือผู้ที่ต้องการโครงสร้างเบื้องต้น ✅ ข้อมูลเสริมจากภายนอก ➡️ system-ui เป็นฟอนต์ที่ใช้ UI ของระบบปฏิบัติการ เช่น San Francisco บน macOS ➡️ color-scheme ช่วยให้เบราว์เซอร์ปรับ user-agent styles ตามธีมของระบบ ➡️ ch คือหน่วยวัดความกว้างของตัวอักษร “0” ในฟอนต์ปัจจุบัน ➡️ min() เป็นฟังก์ชัน CSS ที่เลือกค่าที่น้อยที่สุดจากหลายตัวเลือก ➡️ margin-inline ใช้จัดระยะห่างในแนวแกน inline ซึ่งเหมาะกับการจัด layout แบบ responsive https://thecascade.dev/article/least-amount-of-css/