Best Practices ของผม – CSS
1. คำนำ
ทุกวันนี้ CSS ถูกใช้น้อยกว่าศักยภาพที่มี มีช่องว่างระหว่างนักพัฒนา Angular/React/Vue/... กับ UI designer
UI designer ซ้อน <div> สามสิบชั้นและแปะคลาส CSS อีกสี่สิบคลาส ขณะที่นักพัฒนา Angular ก็คลั่งไลบรารีใหม่ล่าสุดทุก ๆ 2 สัปดาห์ ทั้งที่ dependency
hell ของเขาบิลด์ไม่ผ่านมานานแล้วถ้าไม่ใช้ npm i --force เพราะ peer dependency ขัดแย้งกัน แฟนพันธุ์แท้ TypeScript แทบไม่สนใจ CSS และ HTML แม้แต่ input ที่ง่ายที่สุด
เขาก็ต้องใช้ Material เพราะกลัวว่าจะทำ validation เองไม่ได้ และที่แน่ ๆ คือไม่อยากเสียเวลาไปกับการคิดค้นล้อขึ้นมาใหม่ แต่เขาไม่รู้ตัวว่า พอเจอความต้องการแรกที่
ไลบรารีไม่รองรับ เวลาทั้งหมดที่ประหยัดไว้ก็หายไปอีก และสุดท้ายก็ไปนั่งอ่าน GitHub issue ของไลบรารีนั้นอยู่ดี
ในฐานะนักพัฒนาในโปรเจกต์ fullstack เราแทบไม่มีโอกาสได้แสดงฝีมือด้านการออกแบบ frontend เราได้รับ screen mock จาก Figma มาและต้องทำตามนั้นเป๊ะ ๆ นักพัฒนา frontend แบบนี้ส่วนใหญ่ไม่รู้ด้วยซ้ำว่าแค่ CSS บรรทัดเดียวก็ทำ responsive layout ได้แล้ว CSS ทรงพลังกว่าที่เคยเป็นมา หมดยุคของ การใช้ JS แก้สไตล์แบบลูกเล่น media query จำนวนมหาศาล และ workaround สำหรับ IE 8 แล้ว ไชโย!
2. Super Centered
ตอนสัมภาษณ์งานอาจไม่ได้รับเสียงตอบรับดีเสมอไป แต่ผมชอบมันมาก: ถ้าถูกถามว่าเก่ง frontend ไหม ผมชอบตอบว่า “โอ้ เก่งสิ ผมจัด <div> ให้อยู่กึ่งกลางแนวตั้งได้นะ”
ใคร ๆ ก็รู้ว่าการจัด div ให้อยู่กึ่งกลางนั้นยากขึ้นชื่อ
ตอนนี้ไม่แล้ว:
.parent {
display: grid;
place-items: center
}3. Responsive Grid
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}4. Responsive Flex
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex: 1 1 150px; /* Stretching: */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}5. เลย์เอาต์ของหน้า
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. แถบด้านข้าง (Sidebar)
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}