เขียน HTML/CSS อย่าง Overpowered ด้วย Emmet

หลาย ๆ คนถามมาเยอะมากเวลาเห็นเราเขียนพวก HTML และ CSS ว่าเราใช้ Plugin อะไรในการที่ทำให้พิมพ์แล้วดู OP GG มาก ๆ กด ๆ ไม่กี่ตัวได้ทั้งยวงเลยอะไรแบบนั้น วันนี้เราจะมาเผยความลับของเรากัน ผ่าน Plugin ที่ชื่อว่า Emmet

Emmet คืออะไร ?

Emmet เป็น Plugin สำหรับ Text Editor ที่ทำให้เราสามารถเขียน HTML และ CSS ได้โคตรเร็ว ผ่านการใช้พวกตัวย่อต่าง ๆ ซึ่งเราสามารถติดตั้งได้ใน Text Editor ต่าง ๆ เยอะมาก

ตัวอย่างเช่น Visual Studio Code ที่มันจะมาพร้อมกับ Emmet ให้เราเลย ถ้าเราเปิดไฟล์พวก HTML และ CSS มันจะเปิดการใช้งานให้เองเลย โดยที่เราไม่ต้องทำอะไรเลย สะดวกมาก ๆ

มาลองใช้งานกัน

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

เริ่มจากง่าย ๆ ก่อน เวลาเราเขียน HTML เปิดไฟล์มา เราจะต้องเขียนพวก Head และ Body Tag ต่าง ๆ นา ๆ หลายบรรทัดมาก ๆ พิมพ์ผิดพิมพ์ถูก ซึ่งเราสามารถใช้ Emmet ในการ Generate ตรงนี้ได้เลย โดยการพิมพ์ html:5 เท่านั้น

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

เวลาเราเขียนพวก Tag ต่าง ๆ เราก็สามารถเขียนชื่อ Tag นั้น ๆ ได้โดยตรงเลย ไม่ต้องมีเครื่องหมายมากกว่าน้อยกว่า เพิ่มเติมคือ เราสามารถใส่จำนวนลงไปได้ด้วย เช่น ถ้าเราต้องการ <li> ทั้งหมด 5 ตัว เราก็สามารถพิมพ์เป็น li*5 มันก็จะ Generate ออกมาให้เรา 5 ตัวไปเลย

<li>Header 1</li>
<li>Header 2</li>
<li>Header 3</li>
<li>Header 4</li>
<li>Header 5</li>

เอาให้อลังการกว่านั้น เราสามารถที่จะใส่พวก Index ลงไปได้ด้วย เช่น เราต้องการ li เหมือนเมื่อกี้เลย แต่ใน Content ให้มันแสดงเป็น Menu 1, Menu 2 ไปเรื่อย ๆ เราก็สามารถทำได้โดยการใช้คำสั่ง li{Header $}*5 ถ้าเราลองสังเกตุ ตรงเครื่องหมาย {} จะเป็นเครื่องหมายสำหรับ Content ที่อยู่ข้างใน โดยที่เราสามารถกำหนด Content ที่อยู่ใน Tag ใด ๆ ผ่านเครื่องหมายปีกกาได้เลย เท่สุด ๆ ไปเลย

h1.title -> <h1 class="title"></h1>

จากนั้น ถ้าเราต้องการกำหนดพวก Class หรือ ID ใน HTML Tag ก็ทำได้เช่นเดียวกัน จำง่าย ๆ คือ เวลาที่เราเขียน CSS Selector เราจะใช้ จุด แทน Class และ เครื่องหมายสี่เหลี่ยมแทน ID ใช่แล้ว ใน Emmet ก็ทำแบบนั้นเช่นกัน เช่น เราอยากได้ h1 ที่มี class ว่า title เราก็สามารถพิมพ์เป็น h1.title ได้เลย ตัว ID ก็เช่นกัน ก็เปลี่ยนเป็น เครื่องหมายสี่เหลี่ยมเท่านั้นเอง

h1.title.red-text -> <h1 class="title red-text"></h1>

หรือ ถ้าเราต้องการใส่หลาย ๆ Class และ ID เราก็สามารถใส่จุด และสี่เหลี่ยมต่อ ๆ กันได้เลย เช่น เราต้องการ h1 ที่มี class ชื่อ title กับ red-text และ ID เป็น title-me เราก็สามารถใช้เป็น h1.title.red-text#title-me

<div class="container">
    <h1 class="title">Welcome</h1>
</div>

เมื่อกี้เราเล่นกำหนดทีละส่วนไป เราสามารถทำ Nested ซ้อน ๆ กันไปเลยได้ด้วย ตัวอย่างเช่น เราต้องการ Code แบบด้านบน เราก็สามารถพิมพ์เป็น .container>h1.title ได้เลย

เราลองมาแยกส่วนดูกัน เราจะเห็นว่า มันจะมีเครื่องหมายมากกว่า (>) คั่นอยู่ ถ้าเราลองแยกออกมา เราจะเห็นว่า แยกได้ออกมาเป็น 2 ส่วนด้วยกันคือ .container ซึ่งก็คือการสร้าง Div Tag ที่ใช้ Class ชื่อว่า container ออกมานั่นเอง อ่อ เป็นเรื่องที่เราลืมบอก ถ้าเราไม่ได้กำหนด Tag มันจะใส่เป็น Div Tag ให้เป็น Default อยู่แล้ว และอีกชิ้นก็คือ h1.title ก็คือการสร้าง Heading 1 ที่มี Class ชื่อ title อยู่นั่นเอง ดังนั้นการใส่เครื่องหมายมากกว่า จะเป็นการบอกว่า สิ่งที่อยู่หลังเครื่องหมายมากกว่าจะเป็นลูกของตัวข้างนอกนั่นเอง

.container>(h1.title+(.content-container>p.content))+(footer>.container)

ลองมาดูอะไรที่มันซับซ้อนกว่านี้กัน ดูจากด้านบน เราจะเห็นว่ามันมีอะไรเยอะมาก ๆ อันที่เพิ่มขึ้นมาคือ เครื่องหมายวงเล็บ และ เครื่องหมายบวก เรามาดูทีละอย่างกัน

<h1 class="title"></h1>
<div class="content-container"></div>

เครื่องหมายบวกจะคล้าย ๆ กับเครื่องหมายมากกว่า ที่ว่าเป็นเรื่องของการจัดเรียง Code โดยที่ ถ้าเป็นเครื่องหมายบวก จะเป็นการเอามาต่อท้ายเช่น h1.title+.content-container ก็จะเป็น Code แบบด้านบน จะเห็นว่า มันจะต่างจากการใช้เครื่องหมายมากกว่าที่ ถ้าเป็นเครื่องหมายมากกว่า มันจะเป็นลูก แต่การใช้เครื่องหมายบวก จะเป็นการเอามาต่อกัน

<h1 class="title"></h1>
<div class="content-container">
    <p class="content"></p>
</div>

ในตัวอย่างนี้เกิดจาก h1.title + (.content-container > p.content) จะเห็นว่า คล้ายกับด้านบนเลย แต่เราเพิ่ม p.content มาเป็นลูกของ .content-container แต่จะสังเกตุเพิ่มเติมว่า เราเพิ่มพวกเครื่องหมายวงเล็บมาด้วย มันเอาไว้เพื่อให้เราสามารถอ่านได้ง่ายขึ้นนั่นเอง

นอกจากนั้นการใช้วงเล็บ เรายังสามารถนำไปใช้คู่กับการคูณเหมือนที่เราดูกันในตอนแรกได้เช่น (.content-container > p.content) * 10 มันก็จะสร้าง Div Tag ที่เป็น Class content-container ที่ข้างในในมี Paragraph Tag ที่เป็น Class content ทั้งหมด 10 ชุดด้วยกัน

สรุป : Emmet เป็น Plugin ที่โคตร OP

ที่เราเอามาโชว์ในวันนี้เรียกได้ว่าเป็นน้ำจิ้มเลยก็ว่าได้ จริง ๆ แล้วมันยังทำอะไรได้อีกเยอะมาก ๆ ถ้าเราอยากรู้ว่ามันทำอะได้อีก เราสามารถเข้าไปดูใน Cheat Sheet ของ Emmet ได้เลย แรก ๆ มันอาจจะทำให้เราช้าหน่อย เพราะเรายังจำไม่ได้ว่า เราจะต้องใช้ว่าอะไร แต่ถ้าเราใช้ไปเรื่อย ๆ เริ่มเซียน เราสามารถเขียนทั้ง Layout ได้ในเวลาแค่ไม่กี่วินาทีเท่านั้นเอง

เขียน HTML/CSS อย่าง Overpowered ด้วย Emmet

Emmet คืออะไร ?

มาลองใช้งานกัน

สรุป : Emmet เป็น Plugin ที่โคตร OP

Read Next...

ติดตั้ง Zigbee Dongle บน Synology NAS กับ Home Assistant

โหลด CSV วิธีไหนเร็วที่สุด ?

ฮาวทู Sync Obsidian Note ด้วย LiveSync Plugin

การสร้าง SSD Storage Pool บน Synology DSM