Emmet: أول اختصار Emmet لك

تعلم اختصارات div و p و h1 هو الخطوة الأولى فقط — "أسماء الوسوم الضمنية" في Emmet هي سحر الإنتاجية الحقيقي: .box يتوسع دون كتابة div أبدًا.

1. ما ستتعلمه

• أشكال اختصار الوسوم الأساسية: div p h1 span a والمزيد
• القواعد الأساسية لأسماء الوسوم الضمنية
• كيف يختلف سلوك الحذف بين سياقي HTML و CSS
• اختصارات محددات الفئة .class ومحددات المعرف #id
• تسلسل الفئات المتعددة .btn.btn-primary والاستخدام المشترك عمليًا

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

(1) نقطة الألم: كتابة كل div يدويًا مضيعة للوقت

تبني أليس شبكة بطاقات لصفحة رئيسية لمتجر إلكتروني. تحتاج إلى 3 بطاقات، كل منها تحتوي على صورة وعنوان ووصف وزر. كتابة كل بطاقة يدويًا تبدو هكذا:

<div class="card">
  <img src="" alt="">
  <h3 class="title"></h3>
  <p class="desc"></p>
  <button class="btn">Buy Now</button>
</div>

البطاقة الواحدة 5 أسطر، إذن 3 بطاقات تكون 15 سطرًا؛ 6 بطاقات ستكون 30 سطرًا. كل div، كل class، كل وسم يجب كتابته بشكل متكرر. تحسب أليس: 30 سطرًا من HTML تستغرق 6 دقائق — وفي كل مرة تكتب يدويًا، تخاطر بنسيان وسم إغلاق أو عدم تطابق علامات الاقتباس.

(2) حل Emmet

تأتي إجابة Emmet في جزأين. أولاً، يمكن حذف الوسوم الأساسية — في سياق HTML، .box مكافئ لـ div.box، مما يوفر عليك كتابة اسم الوسم الأكثر شيوعًا. ثانيًا، الهياكل المتكررة تستخدم عامل الضرب * للكتابة مرة واحدة والتوليد عدة مرات. تعيد أليس كتابة شبكة البطاقات بـ Emmet:

.card*3>img+h3.title+p.desc+button.btn{Buy Now}

سطر اختصار واحد يولد جميع البطاقات الثلاث فورًا. يتم تطبيق الفئة card تلقائيًا على div (بما أن div تم حذفه)، ويتم ملء نص الزر {Buy Now} تلقائيًا. 30 سطرًا من HTML تصبح سطر اختصار واحدًا — 6 دقائق من العمل تتقلص إلى 5 ثوانٍ.

(3) الفوائد

الوسوم الأساسية + أسماء الوسوم الضمنية تشكل الدرجة الأولى من سلم إنتاجية Emmet. بعد إتقانها، تكتب أليس شبكات البطاقات في 5 ثوانٍ بدلاً من 6 دقائق — زيادة كفاءة بمقدار 70 ضعفًا. بعد هذا الدرس، ستتمكن من بناء 80% من هياكل HTML الشائعة بسطر اختصار Emmet واحد.

3. اختصارات الوسوم الأساسية

يمكن استخدام وسوم HTML مباشرة كاختصارات. إليك الأكثر شيوعًا:

نصيحة: Emmet يملأ تلقائيًا السمات الأساسية لبعض الوسوم (مثل a يحصل تلقائيًا على href=""، و input يحصل تلقائيًا عل�� type="text") — لا حاجة لكتابتها بنفسك.

4. أسماء الوسوم الضمنية

أسماء الوسوم الضمنية هي آلية الإنتاجية الأساسية في Emmet. عندما تكتب .box، يستنتج Emmet تلقائيًا أنك تريد div — لا حاجة لكتابة div.box بشكل صريح. تتصرف هذه الآلية بشكل مختلف في سياقي HTML و CSS، لذا فهم كل منهما مهم.

نقطة أساسية: حذف اسم الوسم في HTML يكون افتراضيًا div، لكن داخل عناصر أصل معينة يتحول تلقائيًا (مثل .item داخل ul يصبح li، .row داخل table يصبح tr، .opt داخل select يصبح option). القواعد الضمنية الكاملة مغطاة في الدرس 6.

5. أمثلة عملية

تغطي الأمثلة الخمسة التالية جميع السيناريوهات الأساسية للوسوم الأساسية + أسماء الوسوم الضمنية. أتقن هذه وستتمكن من كتابة 80% من هياكل HTML الشائعة.

▶ مثال: div يتوسع إلى <div></div> (الصعوبة: ★)

أبسط اختصار Emmet: اكتب اسم وسم مباشرة.

الاختصار:

div

يتوسع إلى:

<div></div>

الناتج:

حاوية div واحدة مع وضع المؤشر تلقائيًا داخل الوسم، جاهز للمحتوى. `div` هو وسم HTML الأكثر استخدامًا، ويقبل Emmet أسماء الوسوم مباشرة كاختصارات.

▶ مثال: .container div ضمني (الصعوبة: ★)

في سياق HTML، حذف اسم الوسم يكون افتراضيًا div.

الاختصار:

.container

يتوسع إلى:

<div class="container"></div>

قارن مع div.container الصريح:

div.container

نتيجة التوسيع:

<div class="container"></div>

الناتج:

`.container` و `div.container` متكافئان تمامًا. بما أن `div` هو وسم HTML الأعلى ترددًا، يمكن للآلية الضمنية تقليل كتابتك بنسبة 50%. الأمر نفسه ينطبق على `#main`: حذف الوسم يكون افتراضيًا `div`، ويتوسع إلى `<div id="main"></div>`.

▶ مثال: #header.nav (الصعوبة: ★)

يمكن خلط محددات المعرف # ومحددات الفئة . على نفس الوسم.

الاختصار:

#header.nav

يتوسع إلى:

<div id="header" class="nav"></div>

الناتج:

يحصل الوسم على كل من سمة `id="header"` و `class="nav"`. `#` تعني دائمًا معرف، `.` تعني دائمًا فئة — الترتيب لا يؤثر على النتيجة. يمكنك أيضًا إضافة اسم وسم صريح: `header#top.nav` يتوسع إلى `<header id="top" class="nav"></header>`.

▶ مثال: دمج فئات متعددة .btn.btn-primary (الصعوبة: ★★)

يمكن أن يحتوي الوسم الواحد على فئات متعددة، متسلسلة بـ ..

الاختصار:

.btn.btn-primary.btn-lg

يتوسع إلى:

<div class="btn btn-primary btn-lg"></div>

متقدم: مع اسم وسم صريح:

button.btn.btn-primary.btn-lg{Add to Cart}

يتوسع إلى:

<button class="btn btn-primary btn-lg">Add to Cart</button>

الناتج:

يتم فصل الفئات المتعددة بمسافات. Emmet لا يحدد عدد الفئات — هذا مفيد بشكل خاص مع أطر عمل الفئات المساعدة مثل Tailwind CSS و Bootstrap (مثل `class="btn btn-primary btn-lg text-center"`).

▶ مثال: سياق HTML مقابل سياق CSS (الصعوبة: ★★)

نفس الاختصار ينتج نتائج مختلفة تمامًا حسب سياق الملف. هذا أحد أكثر سلوكيات Emmet إرباكًا للمبتدئين.

سياق HTML (ملف .html):

.m10

يتوسع إلى:

<div class="m10"></div>

سياق CSS (ملف .css):

.m10

يتوسع إلى:

margin: 10px;

الناتج:

في ملف HTML، يُعامل `.m10` كـ "وسم div بفئة m10." في ملف CSS، يُعامل `.m10` كـ "اختصار لخاصية margin." يقوم Emmet تلقائيًا بتبديل الأوضاع بناءً على نوع الملف الحالي. سياق HTML يتبع قاعدة "حذف اسم الوسم → div" الضمنية؛ سياق CSS يتبع قاعدة "حذف اسم الخاصية → الاستنتاج من الأحرف الأولى" الضمنية (فقط `margin` تبدأ بـ `m`، لذا الاستنتاج مباشر).

6. مثال كامل: تخطيط بطاقات ثلاثي الأعمدة مدمج

ادمج الوسوم الأساسية، الوسوم الضمنية، عامل الضرب *، وعامل التداخل > لبناء شبكة بطاقات متجر إلكتروني شائعة ثلاثية الأعمدة.

▶ مثال: تخطيط بطاقات ثلاثي الأعمدة (الصعوبة: ★★)

الاختصار:

.container>.row>.col*3>.card>img+h3.title+p.desc+button.btn{View Details}

يتوسع إلى:

<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <img src="" alt="">
        <h3 class="title"></h3>
        <p class="desc"></p>
        <button class="btn">View Details</button>
      </div>
    </div>
    <!-- مكرر مرتين إضافيتين (col + card مكرران 3 مرات إجمالاً) -->
  </div>
</div>

الناتج:

شبكة بطاقات متجر إلكتروني كلاسيكية ثلاثية الأعمدة: حاوية خارجية واحدة، صف واحد، 3 أعمدة (كل منها يحتوي على بطاقة كاملة). `*3` ينطبق على `.col`، لذا يتم تكرار `.col` 3 مرات؛ يتم نسخ الشجرة الفرعية `.card>img+h3.title+p.desc+button.btn` تلقائيًا 3 مرات كأبناء لكل col. لتطبيق `*3` مباشرة على `card` بدلاً من ذلك (مما ينتج صفًا واحدًا + 3 بطاقات كاملة)، استخدم `.container>.row>.card*3>img+h3.title+p.desc+button.btn{View Details}`. قواعد التداخل والضرب المفصلة مغطاة في الدرس 5.

❓ أسئلة شائعة

📖 ملخص

• يمكن استخدام الوسوم الأساسية مباشرة كاختصارات: div p h1 span a إلخ.
• في سياق HTML، حذف اسم الوسم يكون افتراضيًا div
• تتحول الوسوم الضمنية بناءً على السياق الأصلي: .item داخل ul → li، .row داخل table → tr
• استخدم # للمعرف، . للفئة، قابلين للخلط: #header.nav → <div id="header" class="nav"></div>
• تسلسل الفئات المتعددة بـ .: .btn.btn-primary.btn-lg
• نفس الاختصار يمكن أن يتوسع بشكل مختلف تمامًا في سياقي HTML مقابل CSS — امتداد الملف يحدد الوضع

📝 تمارين

1. أساسي (الصعوبة: ★): في ملف HTML، اكتب الاختصارات div، p، h1، و span، واضغط Tab بعد كل منها. سجل النتائج. ثم جرب .box و #main (اختصارات div الضمنية) وقارن جميع التوسيعات الستة.
2. متوسط (الصعوبة: ★★): اكتب اختصار Emmet واحدًا يتوسع إلى شبكة من 5 بطاقات (كل بطاقة تحتوي على صورة وعنوان وفقرة وزر). اشرح لماذا يجب وضع *5 على card وليس في مكان آخر.
3. متقدم (الصعوبة: ★★★): أنشئ ملف .html وملف .css. في كل ملف، اكتب الاختصارات .m10، .p20، و #header. سجل جميع نتائج التوسيع الستة وأنشئ جدول مقارنة بعنوان "سياق HTML مقابل CSS: اختلافات سلوك Emmet."

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

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

من نحن