Advanced & Best Practices

หัวข้อนี้คืออะไร

Utility class คือ class CSS ที่มีหน้าที่เดียวและชัดเจนมาก เช่น ทำให้ข้อความอยู่กึ่งกลาง, เพิ่ม margin ด้านบน, หรือทำให้ element แสดงผลแบบ flex ชื่อของ utility class มักสั้นและบอกหน้าที่ตรง ๆ เช่น .mt-4 (margin-top), .text-center, .flex, .rounded, .hidden utility classes ไม่ได้มาแทนที่ทุกอย่าง แต่เป็นเครื่องมือจัดการ style ที่ใช้บ่อย ทำให้เขียน CSS น้อยลง และนำ class กลับมาใช้ซ้ำในหลาย element ได้ทันที

.mt-4 {
  margin-top: 1rem;
}

.p-4 {
  padding: 1rem;
}

.text-center {
  text-align: center;
}

.flex {
  display: flex;
}

.rounded {
  border-radius: 0.5rem;
}

ทำไมหัวข้อนี้สำคัญ

ปัญหาที่พบบ่อยเมื่อเขียน CSS แบบปกติคือการเขียนสิ่งเดิมซ้ำในหลายที่ เช่น เขียน margin-top: 1rem ใน .header, .card, .section, .footer ทั้งที่เป็นค่าเดียวกันทุกที่ เมื่อต้องการเปลี่ยนค่านั้น ต้องตามไปแก้หลายที่ ซึ่งเสี่ยงต่อการพลาดหรือสร้างความไม่สม่ำเสมอ Utility classes แก้ปัญหานี้ด้วยหลักการง่าย ๆ: - เขียน CSS rule ครั้งเดียวใน utility class - นำ class ไปใส่ใน HTML ทุกที่ที่ต้องการ - เปลี่ยนค่าในที่เดียว ทุก element อัปเดตพร้อมกัน นอกจากนี้ utility classes ยังทำให้ทีมพัฒนาด้วยกันง่ายขึ้น เพราะทุกคนใช้ชุด class เดียวกัน แทนที่จะต่างคนต่างเขียน CSS ของตัวเอง

ตัวอย่างจากชีวิตจริง

Tailwind CSS คือ framework ที่สร้างขึ้นบนแนวคิด utility-first ทั้งหมด — แทบทุก class ใน Tailwind คือ utility class เช่น mt-4, px-6, text-xl, bg-blue-500, rounded-lg, shadow-md Bootstrap ซึ่งเป็น framework ยอดนิยมอีกตัวก็มี utility classes ในตัว เช่น .mt-3 (margin-top), .d-flex (display: flex), .text-center, .fw-bold ซึ่งนักพัฒนาคุ้นเคยกันดี ในโปรเจกต์จริง แม้ไม่ได้ใช้ framework ก็นิยมสร้าง utility classes เองชุดเล็ก ๆ เช่น spacing, text alignment, display helpers เพื่อให้ทีมใช้ร่วมกันได้โดยไม่ต้องเขียน CSS ใหม่ทุกครั้ง

แนวคิดหลักที่ต้องเข้าใจ

กฎสำคัญของ utility class: หนึ่ง class = หนึ่งหน้าที่ ตัวอย่างเช่น .mt-4 ทำหน้าที่แค่เพิ่ม margin-top เท่านั้น ไม่ได้กำหนด font-size หรือ color ด้วย นั่นทำให้นำไปใช้ได้กับทุก element โดยไม่มี side effect เมื่อ element ต้องการหลาย style ก็เพียงใส่หลาย utility classes รวมกัน เช่น class="mt-4 p-4 flex rounded" แทนที่จะเขียน CSS rule ใหม่เฉพาะ element นั้น

การทำงานทีละขั้นตอน

• ระบุ style ที่ใช้บ่อย — สังเกตว่ามีค่า CSS อะไรที่เขียนซ้ำในหลายที่ เช่น margin-top: 1rem, padding: 1rem, text-align: center
• ตั้งชื่อ class ให้สื่อความหมายและสั้น — เช่น .mt-4 สำหรับ margin-top: 1rem, .p-4 สำหรับ padding: 1rem ใช้ตัวเลขแทนขนาด เช่น 4 = 1rem
• เขียน CSS rule สำหรับ utility class — เขียนแค่ property เดียวต่อ class ไม่รวม style อื่นที่ไม่เกี่ยวข้อง
• นำ class ไปใช้ใน HTML — ใส่ utility classes ลงใน attribute class ของ element ได้เลย สามารถรวมหลาย class ใน element เดียวได้

ตัวอย่างที่ 1 — Spacing Utilities

Spacing utilities คือกลุ่ม utility classes สำหรับจัดการ margin และ padding ซึ่งเป็น style ที่ใช้ซ้ำบ่อยที่สุดในการออกแบบหน้าเว็บ

ตัวอย่างที่ 2 — Text & Layout Utilities

Text utilities จัดการ typography เช่น alignment และ font-weight ส่วน layout utilities เช่น .flex และ .hidden ช่วยควบคุมการแสดงผลของ element

ตัวอย่างที่ 3 — ใช้หลาย Utility Classes ร่วมกันใน Component

การใช้ utility classes หลายตัวร่วมกันใน element เดียวเป็นเรื่องปกติ เช่น card component ที่ต้องการ padding, border-radius, shadow, และ flex layout สามารถทำได้ด้วยการใส่ utility classes รวมกันใน attribute class

จุดที่ผู้เริ่มต้นมักสับสน

• Utility class ≠ Semantic class — utility class บอกว่า 'ทำอะไร' เช่น .mt-4 ส่วน semantic class บอกว่า 'เป็นอะไร' เช่น .card ทั้งสองแบบมีที่ใช้ที่ต่างกัน ไม่ได้ใช้แทนกันทั้งหมด
• Class soup — การใส่ utility classes มากเกินไปในบรรทัดเดียว เช่น class="mt-4 mb-2 pt-2 pb-4 px-6 flex gap-2 rounded shadow text-center font-bold" ทำให้ HTML อ่านยาก ควรพิจารณาสร้าง component class แทนถ้าใช้บ่อยมาก
• ตั้งชื่อให้สื่อความหมาย — ชื่อเช่น .fix1, .style-a, .blue-thing ไม่ใช่ utility class ที่ดี ควรใช้ชื่อที่บอกหน้าที่ชัดเจนเช่น .text-blue, .bg-primary
• Utility class มีหน้าที่เดียว — ถ้าเขียน class ที่มีหลาย property ไม่เกี่ยวกัน เช่น .card-style { padding: 1rem; color: red; font-size: 2rem; } นั่นไม่ใช่ utility class แต่เป็น component class

เปรียบเทียบ Utility Classes กับ Semantic Classes

สรุปท้ายบทแบบจำง่าย

Utility classes เปรียบเหมือน 'เครื่องมือช่าง' ในกล่องเครื่องมือ CSS — แต่ละชิ้นเล็ก แต่ใช้ได้หลายงาน เมื่อนำมาผสมกัน ก็สร้าง component ที่ต้องการได้โดยไม่ต้องเขียน CSS ใหม่

• 1 class = 1 หน้าที่ — เขียนแค่ property เดียวต่อ utility class เสมอ
• ตั้งชื่อให้สื่อหน้าที่ — .mt-4 บอกได้ทันทีว่าทำ margin-top 4 units
• ใช้ผสมกันได้อิสระ — ใส่หลาย utility classes ใน element เดียวได้
• อย่าใช้มากเกินไป — ถ้า element หนึ่งต้องการ utility classes มากกว่า 5-6 ตัวที่ใช้ซ้ำบ่อย ควรพิจารณาสร้าง component class แทน

Lab 1 — สร้าง Spacing Utility Classes

HTML มี element ที่ใช้ class .mt-4, .p-4, และ .mb-4 อยู่แล้ว แต่ยังไม่มี CSS รองรับ ให้สร้าง utility classes ทั้ง 3 ตัวนี้ในแท็บ CSS

Lab 2 — ใช้ Utilities กับหลาย Element

CSS มี utility classes .text-center, .font-bold, และ .rounded อยู่แล้ว แต่ HTML ยังไม่ได้ใส่ class ให้ element ต่าง ๆ ให้เพิ่ม class ที่ถูกต้องตาม comment ใน HTML

Lab 3 — แก้ CSS ซ้ำให้เป็น Reusable Utility

CSS ปัจจุบันมี .header, .section, และ .footer ที่ต่างเขียน margin-top: 1rem ซ้ำกันทั้ง 3 ที่ ให้สร้าง utility class .mt-4 แล้วย้ายการใช้งานไปที่ HTML พร้อมลบ margin-top ออกจาก rule เดิมทั้ง 3