Emmet ซึ่งก่อนหน้านี้รู้จักกันในชื่อ Zen Coding เป็นหนึ่งในเครื่องมือที่ดีที่สุดที่คุณควรเพิ่มประสิทธิภาพในการเขียนโค้ด HTML หรือ CSS มันทำงานได้เหมือนการกรอกโค้ด แต่มันมีประสิทธิภาพและน่าทึ่งกว่า มันสามารถทำให้ HTML / CSS ของคุณเป็นแบบอัตโนมัติจากแบบง่าย ๆ ไปสู่แบบซับซ้อน
Emmet ให้การสนับสนุนที่ดีสำหรับ text editor หรือ IDE (Integrated Development Environment) เช่น Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, วงเล็บ, Notepad ++, PHPStorm และอีกมากมาย นอกจากนี้ยังสนับสนุนเครื่องมือแก้ไขออนไลน์เช่น JSFiddle, JSBin, CodePen, IceCoder และ Codio
วิธีการทำงานของ Emmet คือการพิมพ์แป้นคีย์บอร์ดบนแท็บเมื่อเขียนไวยากรณ์เสร็จแล้ว ต่อไปนี้เป็นสัญลักษณ์ Emmet ทั่วไปที่คุณสามารถใช้ได้ หากต้องการดูพวกเขาในทางปฏิบัติโปรดอ่านต่อไป
Emmet - HTML Best Tricks
คุณจะประหลาดใจเมื่อเขียน HTML ด้วย Emmet เหมือนที่ฉันทำ ตามที่ระบุไว้ก่อนหน้านี้ Emmet สามารถย่อ HTML ง่ายๆให้ซับซ้อนมาก และพวกเขาจะเขียนเพียงรหัสเดียวบรรทัด หากคุณย่อชื่อแท็กที่ไม่รู้จัก Emmet จะเขียนแท็กที่คุณเขียนโดยอัตโนมัติ ดูภาพเคลื่อนไหวด้านล่างเพื่อทำความเข้าใจได้ง่าย
1. การทำรัง
ในการซ้อนองค์ประกอบบางอย่างคุณต้องเพิ่มเครื่องหมายที่ใหญ่ขึ้น > หลังจากแต่ละแท็กที่คุณต้องการใช้ ตัวอย่างเช่นเมื่อฉันต้องการมี header พร้อม nav, div, ul และ li ภายในฉันต้องพิมพ์ header>nav>div>ul>li และปุ่มแท็บ hit
2. พี่น้อง
หากคุณไม่ต้องการซ้อนองค์ประกอบของคุณคุณสามารถใช้เครื่องหมายบวก + ตามด้วยแท็กที่คุณต้องการเพิ่ม ตัวอย่าง header+section+article+footer จะให้สถานที่ที่แตกต่างกันสำหรับ header section article และ footer
3. ปีนขึ้น
เมื่อคุณอยู่ในองค์ประกอบของเด็กและต้องการมีองค์ประกอบอื่นนอกเด็กคนนั้นคุณสามารถปีนขึ้นองค์ประกอบหนึ่งได้อย่างง่ายดายด้วยเครื่องหมาย ^ หากคุณพิมพ์สองครั้งคุณจะต้องปีนองค์ประกอบสองครั้งและต่อไปเรื่อย ๆ ตัวอย่างเช่นหากคุณพิมพ์ header>div>h1>nav คุณจะยังคงมีองค์ประกอบ nav อยู่ภายใน h1 หากต้องการออกให้แทนที่เครื่องหมาย > สุดท้ายด้วย ^
4. เพิ่มคลาส
Emmet ยังสามารถรวมชื่อคลาสที่คุณต้องการภายในแท็ก เครื่องหมายที่คุณใช้จะเหมือนกับตัวเลือกคลาสใน CSS ที่เป็นจุด สัญญาณ ตัวอย่างเช่นถ้าฉันต้องการมี div มีคลาส . .container, h1 พร้อมด้วย. .title และ nav ด้วย . .fixed ฉันก็ต้องเขียน div.container>header>h1.title+nav.fixed
หากคุณต้องการมีมากกว่าหนึ่งคลาสภายในให้พิมพ์คลาสเพิ่มเติมของคุณหลังจากคลาสแรกพร้อมกับจุด สัญญาณ ตัวอย่าง: div.container.center จะทำการผลิต .
5. เพิ่ม ID
นอกจากคลาสแล้วคุณยังสามารถเพิ่ม ID ในแท็กด้วยเครื่องหมาย # การใช้งานเหมือนกันกับการเพิ่มคลาส แต่คุณไม่สามารถพิมพ์ double ID ภายใน หากคุณพยายามทำเช่นนั้น Emmet จะอ่าน ID ล่าสุดที่คุณพิมพ์
6. เพิ่มข้อความ
Emmet ไม่เพียงง่ายเพียงแค่ย่อแท็กคุณยังสามารถเพิ่มบรรทัดข้อความได้ ในการเพิ่มข้อความคุณเพียงแค่ตัดข้อความด้วยเครื่องหมายวงเล็บปีกกา {} คุณไม่จำเป็นต้องเพิ่มเครื่องหมาย > ใหญ่ขึ้นเนื่องจากข้อความจะถูกเพิ่มภายในแท็กโดยอัตโนมัติ
7. เพิ่มคุณสมบัติ
หากคุณต้องการเพิ่มคุณสมบัติอื่นนอกเหนือจากคลาสและรหัสเพียงวางแอตทริบิวต์ที่คุณต้องการเพิ่มเครื่องหมายวงเล็บเหลี่ยม [] ตัวอย่างเช่นฉันต้องการภาพที่มีแหล่ง logo.png พร้อมโลโก้ alt ดังนั้นฉันจึงพิมพ์ img[src="logo.png"]
8. การจัดกลุ่ม
เมื่อคุณต้องการให้องค์ประกอบที่มีหลายซ้อนอยู่ภายในแล้วจัดกลุ่มพวกเขาด้วย () เครื่องหมายจะช่วยให้คุณบรรลุสิ่งนี้ได้อย่างง่ายดาย ตัวอย่างฉันต้องการมีคอนเทนเนอร์ที่มีส่วนหัวที่มี h1 และ nav อยู่ภายในและส่วนอื่นนอกส่วนหัวฉันจะเขียน: .container>(header>h1+nav.fixed)+(section>.content+.sidebar)
9. การคูณ
คุณสมบัตินี้อาจกลายเป็นหนึ่งในสิ่งที่คุณโปรดปรานจาก Emmet เช่นเดียวกับการคูณเราสามารถคูณองค์ประกอบได้มากเท่าที่เราต้องการ หากต้องการใช้เพียงเพิ่มเครื่องหมายดาวหลังจากองค์ประกอบที่คุณต้องการคูณและเพิ่มจำนวนองค์ประกอบ ตัวอย่างเช่นฉันต้องการเขียนรายการห้า li ภายใน ul จากนั้นไวยากรณ์ที่ถูกต้องคือ ul>li*5
10. การกำหนดหมายเลขอัตโนมัติ
การกำหนดหมายเลขอัตโนมัติจะช่วยให้คุณเขียนชื่อต่าง ๆ ได้อย่างง่ายดายด้วยจำนวนที่เพิ่มขึ้น ไวยากรณ์ที่ถูกต้องสำหรับคุณสมบัตินี้คือเครื่องหมายดอลลาร์ การกำหนดหมายเลขอัตโนมัติใช้ดีที่สุดกับการคูณ ตัวอย่างฉันต้องการเพิ่มรายการ li ก่อนหน้าของฉันด้วยคลาสจากรายการ item1 ถึง item5 5 ดังนั้นฉันต้องเพิ่มชื่อคลาสเพิ่มเติมด้วยเครื่องหมายดอลลาร์: ul>li.item$*5
11. Lorem
หากคุณเคยเขียนข้อความจำลองด้วยการเปิดตัวสร้าง lipum เช่น lipsum.com ด้วย Emmet คุณไม่จำเป็นต้องทำอีกต่อไป Emmet ยังสนับสนุนตัวสร้างข้อความจำลองด้วย lipsum หรือไวยากรณ์ของ lipsum นอกจากนี้คุณยังสามารถระบุระยะเวลาที่ข้อความของคุณจะกลายเป็น ตัวอย่างเช่นฉันต้องการข้อความที่มีความยาว 10 คำจากนั้นฉันจะพิมพ์ lorem10
12. เอกสารอัตโนมัติ
เมื่อคุณเริ่มโครงการใหม่แทนที่จะเขียนโครงสร้าง html ด้วยตนเองหรือคัดลอกการวางจากแหล่งข้อมูลอื่น Emmet สามารถทำสิ่งนี้ให้คุณได้ดีขึ้น สิ่งที่คุณต้องทำคือพิมพ์อุทาน ! ลงชื่อเข้าใช้แท็บ Hit และความมหัศจรรย์เกิดขึ้น สิ่งนี้จะสร้างโครงสร้างเอกสาร HTML5 ให้กับคุณถ้าคุณต้องการใช้ HTML4 แทนให้พิมพ์ html:4t
13. ลิงค์
หากคุณมีไฟล์ favicon, rss หรือ CSS ภายนอกที่คุณต้องการเพิ่มลงในเอกสารของคุณคุณสามารถใช้เทคนิคลิงก์เพื่อเขียนได้เร็วขึ้น หากต้องการรวม favicon ให้พิมพ์ link:favicon จากนั้นจะสร้างลิงก์ favicon ให้คุณพร้อมชื่อไฟล์ favicon.ico ค่าเริ่มต้นภายใน และสำหรับ css, link:css จะสร้างลิงค์ CSS ให้คุณด้วยชื่อสไตล์เริ่มต้น style.css ภายใน และ RSS จะเป็น rss.xml เป็นชื่อเริ่มต้น
คุณสามารถรวมพวกมันเข้ากับเครื่องหมายบวก + เพื่อสร้างแหล่งข้อมูลที่เร็วขึ้น
14. ผู้ประกาศข่าว
โดยค่าเริ่มต้นเมื่อคุณพิมพ์แท็กแล้วกดแท็บคุณจะได้รับแท็กที่มีแอตทริบิวต์ href อยู่ภายใน แต่คุณสามารถเพิ่มค่า // ถ้าคุณรวมกับลิงค์เช่น a:link และหากคุณต้องการมีลิงค์เมลแทนให้ใช้ a:mail
15. Smart Skipping
เทคนิค HTML สุดท้ายที่ฉันจะให้คุณคือคุณสมบัติการข้ามอย่างชาญฉลาด โดยพื้นฐานแล้วคุณไม่มีชื่อแท็กเมื่อคุณต้องการให้มีคลาสหรือรหัสอยู่ภายใน สิ่งนี้ใช้ได้กับเงื่อนไขบางอย่างเท่านั้น
ก่อนอื่นถ้าคุณต้องการให้ div มี ID หรือคลาสอยู่ภายในคุณไม่จำเป็นต้องเขียนชื่อแท็กเพียงแค่เขียน id หรือสัญลักษณ์คลาสพร้อมกับชื่อของมันโดยตรง
ประการที่สองเมื่อคุณอยู่ในแท็ก ul คุณข้ามการเขียนแท็ก li ถ้ามันมีชั้นเรียนหรือรหัส
และสุดท้ายจะถูกนำไปใช้ภายในแท็ก table คุณสามารถข้ามการเขียนแท็ก tr และ td หากพวกเขามีคลาสหรือรหัสและ Emmet จะเพิ่มพวกเขาโดยอัตโนมัติสำหรับคุณ
Emmet - เคล็ดลับ CSS ที่ดีที่สุด
หลังจากที่คุณเรียนรู้เคล็ดลับ HTML ตอนนี้ได้เวลาสำหรับ CSS สัญลักษณ์ทั่วไปบางอย่างที่แสดงในภาพด้านบนจะไม่ทำงานกับ CSS มันมีขนาดใหญ่กว่าและสัญลักษณ์ปีนขึ้น ^ หากคุณใช้พวกเขาพวกเขาจะสร้างเช่นเดียวกับสัญลักษณ์ + งั้นมาเริ่มกันเลย
1. ความกว้างและความสูง
การกำหนด width และ height ด้วย Emmet นั้นง่ายมาก คุณเพียงแค่ต้องเขียนคำแรกของพวกเขาตามด้วยขนาดที่คุณต้องการเพิ่ม โดยค่าเริ่มต้นหากคุณไม่ได้ระบุหน่วย Emmet จะสร้างพวกเขาด้วยหน่วย px สัญลักษณ์หน่วยที่มีคือเปอร์เซ็นต์ % และ em
2. ข้อความ
มีสัญลักษณ์คุณสมบัติข้อความที่ใช้งานง่ายและจะถูกสร้างขึ้นด้วยค่าเริ่มต้น ta จะสร้าง text-align ด้วยค่า left td จะเป็น text-decoration none ค่า none และ tt จะกลาย text-transform ด้วยค่า uppercase
3. พื้นหลัง
ในการเพิ่มพื้นหลังให้ใช้ตัวย่อ bg คุณสามารถรวมเข้ากับ bgi เพื่อรับ background-image, bgc สำหรับ background-color และ bgr สำหรับ background-repeat คุณยังสามารถเขียน bg+ เพื่อรับรายการคุณสมบัติพื้นหลังทั้งหมด
4. หน้าตัวอักษร
เครื่องหมายบวกไม่ได้ใช้กับพื้นหลังเท่านั้น สำหรับ @font-face คุณสามารถเขียน @f+ สำหรับรายการทั้งหมดของคุณสมบัติ @font-face หากคุณพิมพ์ @f โดยไม่ต้องมีเครื่องหมายบวกคุณจะได้รับ @font-face เบื้องต้นเท่านั้น
5. เบ็ดเตล็ด
เทคนิคที่ยอดเยี่ยมอื่น ๆ คือคุณสามารถย่อ animation การเขียนด้วยข้อความเคลื่อนไหว หากคุณเพิ่มเครื่องหมายลบคุณจะได้รับคุณสมบัติภาพเคลื่อนไหวที่มีค่าเต็ม นอกจากนี้ยังมีข้อความ @kf ที่จะสร้างรายการทั้งหมดของ @keyframe
ข้อสรุป
Emmet เป็นเครื่องมือที่ช่วยประหยัดเวลาได้อย่างมากในการปรับปรุงกระบวนการพัฒนาของคุณ หากคุณเพิ่งรู้จัก Emmet มันยังไม่สายเกินไปที่จะลองตอนนี้ เทคนิคเหล่านั้นเป็นเพียงคุณสมบัติของ Emmet มีสัญลักษณ์และไวยากรณ์อื่น ๆ มากมายใน Emmet โดยเฉพาะอย่างยิ่งสำหรับ CSS เพียงตรงไปที่ Emmet docs หรือแผ่นชีทเพื่ออ่านเพิ่มเติม
