HTML เขียนง่าย แต่ถ้าให้เขียนเยอะ ๆ ก็คงจะปวดหัว ซ้อนกันหลายชั้นแถมยังมี Attribute เต็มไปหมด จับคู่แทกเปิด/ปิดไม่เจอกันเลยทีเดียว
แต่ด้วยพลังของ Emmet Abbreviations จะช ่วยให้เราเนรมิตโครง HTML ได้ในบรรทัดเดียว แถมการใช้งานก็ง่ายเพราะออกแบบมาจากสิ่งที่เรารู้อยู่แล้ว แค่เข้าใจพื้นฐานก็พร้อมใช้งานทันที!
ออกแบบมาให้คล้าย CSS Selector ที่คุ้นเคยกันอยู่แล้ว
การใส่ Class, ID และ Attribute ต่าง ๆ ก็เหมือนการเขียน CSS Selector เลย แทนที่เขียนเพื่อเลือกกลายเป็นการเขียนเพื่อสร้างแทน
ถ้าจะสร้างพร้อม Class, ID และ Attribute หลายตัวก็ใช้รวมกันไปเลย เขียนต่อ ๆ กันเหมือน CSS Selector ทั่วไปได้เลย
ใส่หลายตัว (Sibling) หรือซ้อนกัน (Nested)
ไม่อยากสร้างแค่แทกเดียว หรือจะใส่ไว้ซ้อนกันก็ทำได้ ส่วนนี้ก็ยังใช้เครื่องหมาย CSS Selector พื้นฐานอยู่
ในส่วนนี้แถมให้ก็คือการใส่ข้อความเข้าไปในแทก แค่ใส่ไว้ใน { ปีกกา } ข้อความก็จะไปปรากฏในแทกที่เราระบุไว้
ใส่แบบเดียวกันแต่หลาย ๆ ครั้ง (Multiplication)
ส่วนสุดท้ายที่ดูจะน่าสนใจก็คือการใส่ดอกจัน (*) ตามด้วยตัวเลขจะเป็นการระบุว่าให้สร้างเป็นจำนวนกี่ตัว สะดวกอย่างมากเวลาสร้างรายการอะไรต่าง ๆ
โดยลำดับของแต่ละรายการยังนำไปประกอบในข้อความ, ในคลาสเนม หรือ Attribute อื่น ๆ ได้ด้วย ช่วยเปิดช่องทางใช้งานได้หลากหลายขึ้นไปอีก
การใช้งาน Emmet ไม่ได้มีแค่นี้ตามไปอ่านต่อกันได้ที่: docs.emmet.io
ตัวอย่าง: ลองมาใช้งานกับ Bootstrap
รู้พึ้นฐานกันไปพอสมควรแล้ว ลองมาดูวิธีการใช้งานจริงกัน ตัวอย่างนี้ยกการใช้งานมาจาก Bootstrap ที่เราจะสร้าง Container พ ร้อมกับ Grid ด้านใน
ด้วยการที่ Bootstrap หรือเจ้าอื่น ๆ เช่น Tailwind CSS หรือ Bulma ที่ใช้งานคลาสเนมเป็นหลักอยู่แล้วทำให้สามารถใช้งานร่วมกับ Emmet ได้ทันที
แทบไม่ต้องติดตั้งก็ใช้งานได้
ข่าวดีสำหรับคนที ่สนใจเพราะส่วนใหญ่ Emmet จะมีมาพร้อมกับ Text Editor และ IDE ตัวโปรดของเราอยู่แล้ว ไม่ว่าจะเป็น Visual Studio Code, IntelliJ, Sublime Text และอื่น ๆ อีกมากมาย
เนื้อหานี้ถูกเผยแพร่ครั้งแรกในรูปแบบของโพสท์ Facebook เพื่อให้ง่ายต่อการสืบค้นจึงนำมาจัดเก็บในรูปแบบบทความด้วย