Emmet: ما هو Emmet؟ محرك الاختصارات الأقوى لزيادة سرعة…

Emmet يشبه "الإكمال التلقائي المختصر" لـ HTML و CSS — اكتب بضعة أحرف، اضغط Tab، وشاهدها تتوسع فورًا إلى كود كامل.

1. ما ستتعلمه

• ما هو Emmet — وما ليس كذلك
• القدرات الأساسية: اختصارات HTML، اختصارات CSS، إجراءات المحرر
• Emmet مقابل الكتابة اليدوية: السرعة، معدل الخطأ، منحنى التعلم
• متى وأين تستخدم Emmet: اختيار المحرر، دعم أنواع الملفات
• نظرة عامة على خارطة الطريق للدروس الـ 17 المتبقية

2. قصة حقيقية لمطور واجهة أمامية

(1) نقطة الألم: كتابة HTML يدويًا بطيئة جدًا

أليس هي مطورة واجهة أمامية، كُلفت مؤخرًا بتجديد الصفحة الرئيسية لشركتها. في كل مرة تكتب شريط تنقل، ينتهي بها الأمر بكتابة أكثر من 30 سطرًا من HTML يدويًا: عنصر ul يحتوي على 5 عناصر li، كل منها يحتوي على وسم a. بعد شريط التنقل، هناك عرض شرائح بـ 6 شرائح div، كل منها يغلف صورة ونصًا. بنهاية اليوم، أصابعها تؤلمها — صفحة HTML من 120 سطرًا استغرقت منها 40 دقيقة كاملة. ثم يأتي CSS: margin: 10px 20px، padding: 5px، font-size: 16px — كل سطر يتطلب كتابة اسم الخاصية بالكامل والفواصل المنقوطة. تفكر أليس في نفسها: نصف وقت البرمجة يُقضى في "الكتابة". ألا يمكن للمحرر إكمال هذا تلقائيًا نيابة عني؟

(2) حل Emmet

إجابة Emmet بسيطة: ضغط أنماط HTML/CSS الشائعة إلى اختصارات، وجعل المحرر يوسعها إلى كود كامل فورًا. بعد تعلم Emmet، تكتب أليس نفس شريط التنقل المكون من 30 سطرًا بـ 16 حرفًا فقط:

ul.nav>li.item*5>a{Link $}

تضغط Tab، ويقوم المحرر فورًا بتوسيعها إلى 30 سطرًا من HTML الكامل. تحتاج إلى 6 شرائح عرض؟ سطر واحد: div.slider>div.slide*6>img. كتابة CSS؟ m10-20 يتوسع تلقائيًا إلى margin: 10px 20px، و fz16 يصبح font-size: 16px. الصفحة التي كانت تستغرق 40 دقيقة تستغرق الآن 12 دقيقة فقط.

(3) الفوائد

يقدم Emmet مكاسب فورية وملموسة لمطوري الواجهة الأمامية: تزيد سرعة كتابة HTML بمقدار 3-5 أضعاف، وسرعة CSS بمقدار 2-3 أضعاف. تنخفض الأخطاء مثل نسيان وسوم الإغلاق أو عدم تطابق علامات الاقتباس في السمات — الشائعة عند الكتابة اليدوية — إلى ما يقرب من الصفر لأن Emmet يولد كل شيء تلقائيًا. الأهم من ذلك، يمكن للمطورين التركيز على تصميم الهيكل والتنسيق بدلاً من ضغطات المفاتيح المتكررة. استثمار التعل�� ضئيل: ابنِ انطباعك الأول في 5 دقائق مع هذا الدرس، ثم اقضِ 5-10 دقائق لكل درس من الدروس الـ 17 المتبقية لإتقان مفهوم أساسي واحد في كل مرة. بعد إكمال جميع الدروس الـ 18، تكتب أليس صفحة رئيسية كاملة لمتجر إلكتروني في أقل من 30 دقيقة — بدلاً من ساعتين.

3. التعريف الأساسي لـ Emmet

Emmet (المعروف سابقًا باسم Zen Coding) هو محرك توسيع اختصارات لـ HTML و CSS، صدر لأول مرة بواسطة Sergey Chikuyonok في عام 2009 وأعيد تسميته رسميًا إلى Emmet في عام 2013. يحلل سلاسل الاختصارات الشبيهة بمحددات CSS ويوسعها في الوقت الفعلي إلى كود HTML أو CSS كامل، مدمجًا في المحررات الرئيسية مثل VSCode و WebStorm و Sublime Text.

نصيحة: Emmet ليس لغة برمجة جديدة أو إطار عمل. إنه ملحق محرر — في جوهره، يترجم "سلاسل الاختصارات" إلى "كود كامل".

4. ما يمكن لـ Emmet فعله

تنقسم قدرات Emmet إلى أربع فئات: اختصارات HTML، اختصارات CSS، إجراءات المحرر، والاستخدام المشترك. دعنا نلقي نظرة على بعض الأمثلة لبناء الحدس.

(1) اختصارات HTML

اختصارات HTML هي الميزة الأكثر استخدامًا في Emmet. تكتب اختصارًا شبيهًا بمحدد CSS، تضغط Tab، ويتوسع فورًا إلى شجرة وسوم HTML كاملة.

▶ مثال: اختصار وسم أساسي (الصعوبة: ★)

الاختصار:

ul.nav>li.item*5>a{Link $}

يتوسع إلى:

<ul class="nav">
  <li class="item"><a href="">Link 1</a></li>
  <li class="item"><a href="">Link 2</a></li>
  <li class="item"><a href="">Link 3</a></li>
  <li class="item"><a href="">Link 4</a></li>
  <li class="item"><a href="">Link 5</a></li>
</ul>

الناتج:

يعرض المتصفح قائمة غير مرتبة تحتوي على 5 عناصر قائمة مرتبطة. يتم استبدال الرمز `$` تلقائيًا بعداد تصاعدي من 1 إلى 5.

(2) اختصارات CSS

اختصارات CSS هي القوة الأساسية الأخرى لـ Emmet. يستعير Emmet الأحرف الأولى من أسماء خصائص CSS، ويضغط الخصائص والقيم الشائعة إلى سلاسل قصيرة.

▶ مثال: معاينة اختصار CSS (الصعوبة: ★)

الاختصار:

m10-20

يتوسع إلى:

margin: 10px 20px;

الاختصار:

p10 fz16

يتوسع إلى:

padding: 10px;
font-size: 16px;

الناتج:

`m` هو الحرف الأول من `margin`، و `10-20` تعني 10px للأعلى/الأسفل و 20px لليسار/اليمين. `p` تختصر `padding`، و `fz` تختصر `font-size`. قواعد اختصارات CSS المفصلة مغطاة في الدروس 11-13.

(3) إجراءات المحرر

Emmet ليس مجرد "اكتب اختصارًا → وسّع الكود". إنه يوفر أيضًا مجموعة من إجراءات المحرر التي تجعل التنقل بالمؤشر، وتغليف الكود، ومطابقة التوازن متاحة بضغطة مفتاح واحدة.

▶ مثال: إجراء توسيع الاختصار (ال��عوبة: ★)

افتح أي ملف .html في VSCode، اكتب div.container>ul>li*3، ثم:

# الخطوة 1: اكتب الاختصار
div.container>ul>li*3

# الخطوة 2: اضغط Tab (الاختصار الافتراضي)
# يشغل إجراء "توسيع الاختصار"

# الخطوة 3: يوسع المحرر إلى:
# <div class="container">
#   <ul>
#     <li></li>
#     <li></li>
#     <li></li>
#   </ul>
# </div>

# الخطوة 4: يقفز المؤشر إلى أول <li></li>
# يمكنك البدء ��ي الكتابة فورًا

الناتج:

سطر واحد من الاختصار يتحول فورًا إلى 6 أسطر من HTML الكامل، مع وضع المؤشر في أول موضع قابل للتحرير — لا حاجة للنقر اليدوي. استخدام الإجراءات المفصل مغطى في الدروس 14-16.

(4) عرض توضيحي مشترك

اجمع اختصارات HTML + اختصارات CSS + إجراءات المحرر، ويمكنك كتابة نموذج تسجيل دخول كامل في سطر واحد. إليك مثال مبسط:

▶ مثال: نموذج تسجيل دخول كامل (الصعوبة: ★★)

اختصار HTML:

form#login>(input[type=text name=user placeholder="Username"])+(input[type=password name=pwd placeholder="Password"])+(button.btn{Login})

يتوسع إلى:

<form id="login">
  <input type="text" name="user" placeholder="Username">
  <input type="password" name="pwd" placeholder="Password">
  <button class="btn">Login</button>
</form>

اختصار CSS المطابق:

#login{w400 bg:#f5f5f5 p20}
.btn{bg:#3b82f6 c:#fff bd:none p10-20 cur:pointer}

يتوسع إلى:

#login {
  width: 400px;
  background: #f5f5f5;
  padding: 20px;
}
.btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

الناتج:

يعرض المتصفح بطاقة تسجيل دخول بعرض 400px تحتوي على حقلي إدخال وزر تسجيل دخول أزرق. من إدخال الاختصار إلى نموذج وظيفي بالكامل يستغرق خطوتين فقط (سطر HTML واحد + سطر CSS واحد)، حوالي 5 ثوانٍ.

5. معاينة مسار التعلم

يحتوي هذا البرنامج التعليمي على 18 درسًا عبر 6 مراحل:

بعد جميع الدروس الـ 18، ستتمكن من بناء هياكل HTML معقدة من سطر اختصار واحد، وكتابة CSS الشائع باختصار، وزيادة سرعة تحريرك 3-5 أضعاف باستخدام 5 إجراءات أساسية.

❓ أسئلة شائعة

📖 ملخص

• Emmet هو محرك توسيع اختصارات HTML/CSS، صدر في 2009، مدمج في المحررات الرئيسية
• القدرات الأساسية: اختصارات HTML (اختصار بأسلوب محدد CSS) + اختصارات CSS (أحرف أولى من أسماء الخصائص) + إجراءات المحرر
• مقارنة بالكتابة اليدوية: أسرع 3-5 مرات، معدل خطأ شبه معدوم، لكنه يتطلب حفظ ~8 عوامل أساسية
• الاستخدام المشترك: سطر اختصار HTML واحد + سطر اختصار CSS واحد = نموذج تسجيل دخول في 5 ثوانٍ
• يمتد البرنامج التعليمي على 18 درسًا عبر 6 مراحل؛ هذا هو الدرس 1 من مرحلة البدء. الدروس اللاحقة تتعمق في كل عامل وحالة استخدام

📝 تمارين

1. أساسي (الصعوبة: ★): افتح محررك المفضل، أنشئ ملف .html جديدًا، اكتب div واضغط Tab. سجل النتيجة. ثم جرب div.box واضغط Tab مرة أخرى. قارن بين التوسيعين.
2. متوسط (الصعوبة: ★★): اكتب الاختص��ر ul>li*3>a{Item $} في محررك، اضغط Tab، ولاحظ النتيجة. ثم غير *3 إلى *6 وأعد التوسيع. سجل الاختلافات.
3. متقدم (الصعوبة: ★★★): استخدم اختصار Emmet واحدًا لكتابة هيكل HTML الكامل لصفحة رئيسية تحتوي على شريط تنقل، وعرض شرائح، و3 بطاقات، وتذييل (CSS غير مطلوب). التقط 4 لقطات شاشة تظهر قبل وبعد التوسيع.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن