HTML
Best Practices
Reusable Page Sections
บทเรียนนี้สอนผู้เริ่มต้นให้มอง section ของหน้าเว็บเป็น pattern ที่นำกลับมาใช้ซ้ำได้ ไม่ใช่เขียนใหม่ทุกครั้ง โดยเน้นว่าการมีโครงสร้างและ class ร่วมกันช่วยให้หน้าเว็บสม่ำเสมอ แก้ง่าย และพัฒนาได้เร็วขึ้น
1. หัวข้อนี้คืออะไร
Reusable Page Sections คือการออกแบบส่วนของหน้าเว็บให้มีรูปแบบที่สามารถนำกลับมาใช้ซ้ำได้ในหลายจุด โดยไม่ต้องเริ่มเขียนโครงสร้างใหม่ทั้งหมดทุกครั้ง ในหน้าเว็บจริง เรามักเจอ pattern ซ้ำอยู่บ่อย เช่น hero, card list, feature list, testimonial หรือ footer ถึงแม้ข้อความและข้อมูลด้านในจะต่างกัน แต่โครงสร้างหลักมักคล้ายกัน แนวคิดสำคัญคือให้คิดเป็น “โครงสร้างที่ใช้ซ้ำได้” มากกว่า “บล็อกที่เขียนเฉพาะจุด” เพื่อให้เวลาต้องเพิ่ม section ใหม่ เราสามารถใช้ pattern เดิมแล้วเปลี่ยนเฉพาะข้อมูลด้านในได้
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้หน้าเว็บหลายส่วนดูสม่ำเสมอ เพราะใช้ pattern เดียวกันเป็นฐาน
- ช่วยให้พัฒนาได้เร็วขึ้น เพราะเราไม่ต้องเขียนโครงสร้างใหม่ทุกครั้ง
- ทำให้แก้ทีเดียวแล้วหลายจุดได้ประโยชน์ เมื่อ section หลายชุดใช้ class หรือโครงสร้างร่วมกัน
- ช่วยให้คนอ่านโค้ดเข้าใจง่ายขึ้น เพราะมองออกว่าบล็อกไหนใช้ pattern เดียวกัน
- ทำให้ผู้เริ่มต้นเริ่มคิดเป็นระบบ ไม่ใช่แก้เฉพาะหน้าเป็นจุด ๆ ตลอดเวลา
3. ตัวอย่างจากชีวิตจริง
ลองนึกถึงร้านกาแฟที่มีเมนูเครื่องดื่มหลายใบ แต่ใช้ป้ายรูปแบบเดียวกันทั้งหมด เช่น ชื่อเมนูอยู่ด้านบน รายละเอียดสั้นอยู่ตรงกลาง และราคาหรือปุ่มสั่งอยู่ด้านล่าง แม้แต่ละเมนูจะมีข้อความต่างกัน แต่ pattern ของป้ายเหมือนกัน ทำให้ร้านดูเป็นระเบียบและทำงานได้เร็วขึ้น ถ้าจะเพิ่มเมนูใหม่ก็แค่ใช้แบบเดิมแล้วเปลี่ยนข้อมูล หน้าเว็บก็เหมือนกัน เราอาจมีหลาย section ที่ layout คล้ายกัน เช่น กลุ่มคุณสมบัติ กลุ่มรีวิว หรือรายการการ์ด ถ้าคิดเป็น pattern ร่วมไว้ตั้งแต่ต้น การทำซ้ำจะง่ายและสม่ำเสมอกว่าเขียนใหม่ทุกครั้ง
4. แนวคิดหลักที่ต้องเข้าใจ
- การใช้ซ้ำไม่ได้หมายถึงทุก section ต้องหน้าตาเหมือนกันเป๊ะ แต่หมายถึงมี pattern ร่วมกันชัดเจน
- section ที่ reusable ควรมีโครงสร้างร่วม เช่น หัวข้อ, เนื้อหา, รายการ หรือการ์ดที่เรียงแบบคล้ายกัน
- การมี class ร่วมอย่าง `.section-title`, `.section-content`, `.card` ช่วยให้แก้สไตล์ครั้งเดียวแล้วหลายจุดได้ผล
- ควรแยกสิ่งที่เป็น pattern ออกจากสิ่งที่เปลี่ยนได้ เช่น โครงสร้างคงเดิม แต่ข้อความและข้อมูลด้านในเปลี่ยนได้
- การคิด reusable คือการออกแบบเผื่อใช้ซ้ำ ไม่ใช่รอให้มีหลายจุดก่อนแล้วค่อยย้อนกลับมาแก้
- โค้ดที่ reusable มักอ่านง่ายกว่า เพราะเรามองเห็นว่าแต่ละ section อยู่ในตระกูล pattern เดียวกัน
5. การทำงานทีละขั้นตอน
- 1) ดูก่อนว่าหน้าเว็บมี section แบบไหนที่ซ้ำ pattern กันบ้าง เช่น hero, card list หรือ content block
- 2) แยกให้ออกว่าอะไรคือโครงสร้างร่วม และอะไรคือข้อมูลที่เปลี่ยนได้
- 3) ตั้ง class หรือโครงสร้างร่วมให้ชัด เช่น `.section-block`, `.section-title`, `.section-content`, `.card`
- 4) ทดลองสร้างอย่างน้อย 2 section ด้วย pattern เดียวกัน เพื่อยืนยันว่าโครงนี้ใช้ซ้ำได้จริง
- 5) ทบทวนอีกครั้งว่าเราออกแบบเผื่อใช้ซ้ำ หรือยังเขียนแยกกันแบบเฉพาะจุดอยู่
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้เปรียบเทียบระหว่างการเขียนเฉพาะจุดกับการออกแบบเผื่อใช้ซ้ำ โดยใช้ section สองชุดที่มี pattern เดียวกัน แต่เปลี่ยนแค่ข้อความและการ์ดด้านใน
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่า reusable แปลว่าทุก section ต้องเหมือนกันทุกอย่าง ทั้งที่จริงแค่มี pattern ร่วมกันก็พอ
- เขียน class ใหม่ทุกบล็อกแม้โครงสร้างจะคล้ายกันมาก ทำให้แก้หลายจุดโดยไม่จำเป็น
- มองเฉพาะข้อความใน section จนลืมดูว่า layout และโครงสร้างซ้ำกันอยู่แล้ว
- สับสนระหว่างการใช้ซ้ำระดับ pattern กับการคัดลอกโค้ดแบบไม่คิดโครงสร้าง
- คิดว่า reusable เป็นเรื่องยากเกินไป ทั้งที่เริ่มต้นได้จากการตั้ง class ร่วมง่าย ๆ
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ควรใช้เมื่อไร |
|---|---|---|
| reusable section vs เขียนแยกทุกจุด | แบบ reusable มี pattern ร่วมกัน ส่วนการเขียนแยกทุกจุดทำให้แต่ละบล็อกแยกขาดจากกัน | ถ้ามี section หลายชุดที่ layout คล้ายกัน ควรคิดเป็น reusable section |
| class ร่วม vs class คนละชุดทุกบล็อก | class ร่วมช่วยให้แก้ครั้งเดียวแล้วหลายจุดได้ผล ส่วน class คนละชุดทำให้โค้ดกระจัดกระจาย | เมื่อหลาย section ใช้โครงเดียวกัน ควรตั้งชื่อ class ร่วมให้สื่อบทบาท |
| pattern เดียวข้อมูลต่างกัน vs layout ใหม่ทุกครั้ง | pattern เดียวช่วยให้ข้อมูลหลายชุดอยู่ในระบบเดียวกัน ส่วน layout ใหม่ทุกครั้งทำให้หน้าไม่สม่ำเสมอ | ถ้าต่างกันแค่ข้อความหรือรายการภายใน ให้ใช้ pattern เดิมได้ |
| section reusable vs component ที่ยังไม่ reusable | section reusable ถูกออกแบบให้หลายจุดใช้โครงสร้างร่วมกันได้ ส่วนที่ยังไม่ reusable มักผูกกับข้อมูลหรือชื่อ class เฉพาะจุดมากเกินไป | ถ้าต้องเพิ่มบล็อกลักษณะเดียวกันบ่อย ควรเริ่มออกแบบให้ reusable ตั้งแต่แรก |
9. สรุปท้ายบทแบบจำง่าย
- Reusable Page Sections คือการออกแบบ section ให้ใช้ pattern ซ้ำได้
- การใช้ซ้ำไม่จำเป็นต้องหน้าตาเหมือนกันทุกจุด แต่ควรมีโครงสร้างร่วมกันชัดเจน
- class อย่าง `.section-title`, `.section-content`, `.card` ช่วยให้แก้ทีเดียวแล้วหลายจุดได้ประโยชน์
- คิดเป็นโครงสร้างที่ใช้ซ้ำได้ ดีกว่าเขียนใหม่แยกทุกครั้ง
- ถ้าหลาย section คล้ายกันมาก ให้ถามว่ามันควรอยู่ใน pattern เดียวกันหรือไม่
10. Lab สำหรับ Playground
Lab ทั้ง 3 ข้อนี้ออกแบบให้ฝึกคิดแบบ reusable ตั้งแต่ระดับ section ไปจนถึง card และการ refactor โค้ดที่เคยเขียนแยกกันให้กลายเป็น pattern เดียวกัน
Lab 1 (พื้นฐาน): สร้าง section 2 ชุดที่ใช้โครงสร้างเดียวกัน
ชื่อ Lab: สอง section หนึ่ง pattern เป้าหมาย: ฝึกสร้าง section ซ้ำกัน 2 ชุดด้วยโครงสร้างร่วม โจทย์: สร้าง section จำนวน 2 ตัวที่ใช้ class `section-block` เหมือนกัน และแต่ละ section ต้องมี `h2.section-title` กับ `div.section-content` เงื่อนไข: ต้องมี .section-block 2 ตัว, .section-title 2 ตัว, .section-content 2 ตัว และต้องมีข้อความ "บทเรียนแนะนำ" กับ "รีวิวจากผู้เรียน" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text และ browser runtime แนวทางการคิด: อย่าแยกโครงสร้างคนละแบบ ให้ใช้ pattern เดียวแล้วเปลี่ยนเฉพาะหัวข้อ
Lab 2 (กลาง): ทำ card หลายใบที่ใช้ class ร่วมกัน
ชื่อ Lab: การ์ดหลายใบแบบ reusable เป้าหมาย: ฝึกใช้ class ร่วมกับ card หลายใบ โจทย์: สร้าง card จำนวน 3 ใบด้วย class `card` ภายใน `.section-content` และกำหนด CSS ให้ `.card` มี `border-radius` เงื่อนไข: ต้องมี .card 3 ตัว, ต้องมี `.section-content` 1 ตัว, source ต้องมีข้อความ "Card กลาง", และ CSS ของ `.card` ต้องมี `border-radius` สิ่งที่ระบบควรตรวจ: selector count, selector exists, css declaration, source text และ browser runtime แนวทางการคิด: ใช้ class เดียวกันกับ card ทุกใบ แล้วปล่อยให้ข้อมูลด้านในเปลี่ยนได้
Lab 3 (ท้าทาย): ปรับ section ที่เขียนแยกกันให้กลายเป็น pattern เดียวกัน
ชื่อ Lab: รีแฟกเตอร์ให้เป็น reusable pattern เป้าหมาย: ฝึกเปลี่ยน section ที่เคยตั้งชื่อแยกกัน ให้ใช้ pattern ร่วมกัน โจทย์: จากโค้ดตั้งต้น ให้ refactor section ทั้งสองให้ใช้ class `section-block`, `section-title`, `section-content` เหมือนกัน และภายในต้องมี `.card` อย่างน้อย section ละ 1 ใบ เงื่อนไข: ต้องมี .section-block 2 ตัว, .section-title 2 ตัว, .section-content 2 ตัว, .card รวม 2 ตัว, และต้องไม่มี `.promo-heading` กับ `.review-heading` เหลืออยู่ สิ่งที่ระบบควรตรวจ: selector count, css declaration, source text และ browser runtime แนวทางการคิด: มองหาส่วนที่ layout คล้ายกัน แล้วรวมให้เป็นชื่อ class และ pattern เดียวกัน