COOL IT IDEAS AND STUFF

See the original english version Click here!

 

การเขียน HTML และ CSS ไม่จำเป็นต้องช้า หรือซ้ำไปซ้ำมาจนกลายเป็นเรื่องน่าเบื่ออีกต่อไป ด้วยนิสัยการเขียน Code และเครื่องมือบางอย่าง คุณสามารถลดเวลาในการทำงานลงได้อย่างมาก นี่คือ 10 เทคนิคการเขียน HTML & CSS ให้เร็วขึ้นแบบมือโปร ที่คุณสามารถนำไปประยุกต์ใช้งานได้จริง

1. ใช้ Emmet Shortcuts

ใน VS Code และ Editors ส่วนใหญ่จะมี Emmet ติดมาด้วยอยู่แล้ว มันคือ “Shorthand” สำหรับเขียน HTML/CSS ให้เร็วขึ้นอย่างเหลือเชื่อ

ตัวอย่าง:

พิมพ์ ul>li*5 + Tab  จะได้รายการ <ul> ที่มี <li> 5 ตัวทันที

พิมพ์ .card + Tab  จะได้แท็ก <div class="card"></div>

แค่นี้ก็ช่วยลดเวลาการเขียน HTML ที่ซ้ำ ๆ ได้มากพอสมควรเลย

2. ใช้ CSS Shorthand

หยุดเขียน CSS แบบยืดยาว แล้วเปลี่ยนมาใช้ “Shorthand” ดู

แบบยาว:

แบบย่อ:

ผลลัพธ์เหมือนกัน แต่ Code มีความ Clean และพิมพ์เร็วขึ้นมาก

3. เริ่มจาก Boilerplate

อย่าเสียเวลาตั้งค่าพื้นฐานทุกครั้ง แนะนำให้ลองสร้าง Template เริ่มต้นของตัวเอง หรือใช้ HTML5 Boilerplate ก็ได้

ตัวอย่าง Snippet ง่าย ๆ:

แค่เรียก Snippet เดียว ก็พร้อมเริ่ม Project ได้เลย

4. ใช้ Browser DevTools

แทนที่จะเดา CSS เอง แนะนำให้ทดลองปรับแบบ Live ใน Browser เลยจะง่ายกว่า

• ทดลองกฎ Flex หรือ Grid ได้ทันที
• ใช้การลากเพื่อปรับค่า Padding/Margin ด้วย Mouse
• แล้วคัดลอก Code ที่ได้กลับไปวางใน File จริง

ไม่ต้องเสียเวลาทำ Save / Refresh / Repeat อีกต่อไป

5. ใช้ CSS Variables

อย่าใช้การ Copy สีหรือ Font ซ้ำ ๆ ไปทุกที่ แนะนำให้ใช้ ตัวแปร CSS แทน เช่น:

ตอนนี้เพียงเปลี่ยนแค่บรรทัดเดียว สีหรือ Theme ทั้ง Web ก็จะถูก Update ตามไปด้วย

6. ใช้ Flexbox & Grid ให้คล่อง

เลิกต่อสู้กับ Float หรือ Margin ที่จัดไม่ลงตัว เพราะ Flexbox และ Grid คือเพื่อนที่ดีที่สุดของ Web Designer

• จัดกึ่งกลางด้วย Flexbox:

• สร้าง 3 Column ด้วย Grid:

7. ใช้ VS Code Snippets & Extensions

สร้าง Snippets สำหรับ Code ที่มักใช้งานบ่อย ๆ เช่น พิมพ์ btn แล้ว Expand เป็นปุ่มพร้อม Style ได้ทันที

Extensions ที่ควรมี:

• Live Server: Auto Refresh
• Prettier: จัด Format ของ Code ให้สวยงาม
• Auto Rename Tag: เปลี่ยน Opening และ Closing Tags พร้อมกันอัตโนมัติ

8. ใส่ CSS Reset

Browser แต่ละตัว มีค่าเริ่มต้น (Default Style) ที่ไม่เหมือนกัน แต่การใช้ไฟล์อย่าง normalize.css จะทำให้การแสดงผลเหมือนกันทุกที่

9. เขียน Class ที่ใช้ซ้ำได้

แทนที่จะเขียน CSS แบบ Custom เองสำหรับทุกอย่างในทุกครั้ง แนะนำให้สร้าง Utility Class เล็ก ๆ สำหรับใช้ซ้ำ เช่น

จะทำให้ Code มีความ Clean กว่า และพิมพ์น้อยลงเยอะมาก เพราะ Reusability = Less Typing + Cleaner Code

10. ฝึกสร้าง Project เล็ก ๆ

ทางลัดที่ทำให้ “เขียนเร็วขึ้น” ก็คือ การฝึกเขียนบ่อย ๆ

ลองทำการ Clone Landing Page, ทำ Challenge จาก Frontend Mentor หรือสร้าง Projects เล็ก ๆ ของตัวคุณเอง

เมื่อทำซ้ำบ่อย ๆ มากพอ เทคนิคเหล่านี้จะกลายเป็นสัญชาตญาณของคุณ

สรุป

และนี่ก็คือ 10 เทคนิคการเขียน HTML & CSS ให้เร็วขึ้นแบบมือโปร เพราะความเร็วในการเขียน HTML & CSS ไม่ใช่เรื่องของพิมพ์เร็ว แต่คือ การทำงานให้ฉลาดขึ้น

เริ่มจากสิ่งง่าย ๆ:

• ใช้ Emmet
• ทำความเข้าใจกับ Flexbox/Grid
• เตรียม Boilerplate และ Snippet ของตัวเอง

เพียงแค่นี้ สิ่งที่เคยใช้เวลานานหลายชั่วโมง ก็จะเหลือแค่ไม่กี่นาทีเท่านั้น

ที่มา: https://javascript.plainenglish.io/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

 

บทความล่าสุด

• 7 Open-Source Projects น่าทึ่งของปี 2025 ที่ Developer ไม่ควรพลาด
• 12 เทคนิค Data Visualization ที่เปลี่ยนกราฟธรรมดาให้กลายเป็นเรื่องเล่าที่ทรงพลัง
• 15 Python Libraries ที่ช่วยยกระดับการทำงานของ Backend Developer