Emmet: أساسيات اختصارات CSS

خلال الدروس العشرة الأولى، تعلمت جميع اختصارات HTML في Emmet — توليد هياكل معقدة من اختصارات سطر واحد. لكن HTML هو فقط هيكل الصفحة؛ ما يحدد المظهر البصري حقًا هو CSS. يوسع هذا الدرس قدرات Emmet من HTML إلى CSS: سياق CSS يستدل تلقائيًا على أسماء الخصائص من أحرفها الأولى، ويضيف وحدات px تلقائيًا، ويستخدم الشرطات لفصل القيم المتعددة، ويستخدم # للألوان — مما يتيح لك كتابة margin: 10px 20px; و font-size: 16px; و color: #ffcc00; وغيرها من الخصائص عالية التكرار في سطر اختصار واحد.

1. ما ستتعلمه

• الفروق الرئيسية بين سياق CSS وسياق HTML: نفس الاختصار يتوسع بشكل مختلف تمامًا
• الخصائص الرقمية تضيف px تلقائيًا: m10 ← margin: 10px;، p10 ← padding: 10px;
• صيغة الوحدات الصريحة: m10% ← margin: 10%;، m10em ← margin: 10em;
• اختصار الشرطة للقيم المتعددة: m10-20 ← margin: 10px 20px;، p10-20-30 ← اختصار 3 قيم
• اختصار الألوان: c#fc0 ← color: #ffcc00;، bd1-s#ccc ← border: 1px solid #ccc;
• لاحقة ! تفرض !important: m10! ← margin: 10px !important;

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

(1) نقطة الألم: CSS بطيء جدًا في الكتابة؛ الخصائص المتكررة تؤلم اليدين

كانت أليس تعيد تنسيق صفحة هبوط لمتجر إلكتروني. احتاجت كتابة margin: 10px 20px; و padding: 16px; و font-size: 14px; و color: #333; و background-color: #f5f5f5; وأنماط أساسية أخرى لـ 6 بطاقات. كل قاعدة تتطلب كتابة اسم الخاصية كاملاً والنقطتين والقيمة والفاصلة المنقوطة — بمتوسط 18 حرفًا لكل خاصية. حسب إحصائها: 30 قاعدة للكتابة، بمجموع 540 ضغطة مفتاح + 30 ضغطة Tab للتبديل بين قيم الخصائص. استغرقت 8 دقائق كاملة. الأسوأ: في منتصف الطريق كتبت colour (بالتهجئة البريطانية) عن طريق الخطأ وأمضت 5 دقائق في تصحيح سبب عدم عمل CSS. فكرت أليس: اختصارات CSS شائعة جدًا بوضوح — لماذا لا تعمل مثل HTML، حيث "بضعة أحرف + Tab" تتوسع تلقائيًا؟

(2) كيف تحل اختصارات CSS في Emmet المشكلة

اختصارات CSS في Emmet تستعير الأحرف الأولى من أسماء خصائص CSS كاختصارات، مما يتيح لأليس كتابة سطر اختصار واحد يساوي خاصية كاملة. هناك 4 آليات رئيسية:

1. استنتاج الوحدات: الأعداد الصحيحة تضيف px تلقائيًا (m10 ← margin: 10px;)، والأعداد العشرية تضيف em تلقائيًا (m1.5 ← margin: 1.5em;).
2. الوحدات الصريحة: ألحق حرف الوحدة مباشرة بعد الرقم: m10% ← margin: 10%;، m10em ← margin: 10em;.
3. الشرطات للقيم المتعددة: استخدم - لفصل قيم متعددة: m10-20 ← margin: 10px 20px;، p10-20-30 ← padding: 10px 20px 30px;.
4. فاصل اللون #: c#fc0 ← color: #ffcc00;، bd1-s#ccc ← border: 1px solid #ccc;.

أعادت أليس كتابة عمل CSS ذي الثماني دقائق كاختصارات Emmet:

.m10-20+p16+fz14+c#333+bgc#f5f5f5

سطر واحد، 32 حرفًا، 6 ضغطات Tab (كل اختصار يتوسع بشكل مستقل)، وتم إنجاز أنماط 6 بطاقات في 12 ثانية. 8 دقائق من العمل اختزلت إلى 12 ثانية — زيادة سرعة 40 ضعفًا.

(3) الفوائد

اختصارات CSS هي الدرجة الثانية من سلم Emmet لكتابة الأنماط. بمجرد إتقانها، تزيد سرعة كتابة الأنماط لأليس 30–50 ضعفًا، وتنخفض معدلات الخطأ (الأخطاء الإملائية، الفواصل المنقوطة المنسية) إلى ما يقرب من الصفر. الآليات الأساسية الست في هذا الدرس تغطي 90% من كتابة CSS اليومية. بعد هذا الدرس، تستطيع أليس كتابة CSS صفحة هبوط في أقل من 15 ثانية — بدلاً من 8 دقائق.

3. التعريف الأساسي لاختصارات CSS

اختصار CSS هو آلية ضغط اسم الخاصية + القيمة + الوحدة الثلاثية في واحد التي يوفرها Emmet في سياقات ملفات CSS (.css، .scss، .less). فلسفة تصميمه: استعارة الأحرف الأولى من أسماء خصائص CSS كاختصارات، بحيث "بضعة أحرف + قيمة + Tab" تتوسع تلقائيًا إلى خاصية كاملة.

graph LR
    A[اختصار CSS في Emmet] --> B[استنتاج اسم الخاصية]
    A --> C[استنتاج الوحدة]
    A --> D[فواصل القيم]
    A --> E[لاحقة !]

    B --> B1[m → margin]
    B --> B2[p → padding]
    B --> B3[fz → font-size]
    B --> B4[lh → line-height]

    C --> C1[عدد صحيح → px]
    C --> C2[عدد عشري → em]
    C --> C3[وحدة صريحة → % / em / ex]
    C --> C4[أسماء مستعارة للوحدات p/e/x]

    D --> D1[شرطة - للقيم المتعددة]
    D --> D2[فاصل اللون #]
    D --> D3[اسم مستعار للحرف s=solid]

    E --> E1[! → !important]

    style A fill:#3b82f6,color:#fff
    style B fill:#10b981,color:#fff
    style C fill:#f59e0b,color:#fff
    style D fill:#8b5cf6,color:#fff
    style E fill:#ef4444,color:#fff

graph LR
    A[اختصار CSS في Emmet] --> B[استنتاج اسم الخاصية]
    A --> C[استنتاج الوحدة]
    A --> D[فواصل القيم]
    A --> E[لاحقة !]

    B --> B1[m → margin]
    B --> B2[p → padding]
    B --> B3[fz → font-size]
    B --> B4[lh → line-height]

    C --> C1[عدد صحيح → px]
    C --> C2[عدد عشري → em]
    C --> C3[وحدة صريحة → % / em / ex]
    C --> C4[أسماء مستعارة للوحدات p/e/x]

    D --> D1[شرطة - للقيم المتعددة]
    D --> D2[فاصل اللون #]
    D --> D3[اسم مستعار للحرف s=solid]

    E --> E1[! → !important]

    style A fill:#3b82f6,color:#fff
    style B fill:#10b981,color:#fff
    style C fill:#f59e0b,color:#fff
    style D fill:#8b5cf6,color:#fff
    style E fill:#ef4444,color:#fff

نصيحة: اختصارات CSS في Emmet لا تعمل إلا في سياقات CSS (ملفات .css، .scss، .less). في ملف HTML، كتابة m10 تتوسع إلى <div class="m10"></div> (وسم div بفئة m10) — مختلف تمامًا عن سياق CSS. الفرق بين السياقين هو ��كثر المزالق شيوعًا للمبتدئين.

(1) الفروق الرئيسية بين سياق CSS وسياق HTML

4. استنتاج الوحدات: تلقائي + صريح + أسماء مستعارة

استنتاج الوحدات هو الآلية الأساسية الأولى لاختصارات CSS. عندما يرى Emmet رقمًا، يضيف وحدة تلقائيًا وف�� قاعدة "عدد صحيح ← px، عدد عشري ← em"، أو يمكنك كتابة حرف الوحدة صراحة.

(1) الخصائص الرقمية تضيف px تلقائيًا

اختصارات CSS ذات القيم الصحيحة تضيف وحدة px تلقائيًا. هذا هو شكل التوسيع الأعلى تكرارًا في اختصارات CSS في Emmet.

نقطة أساسية: الأعداد الصحيحة تضيف px تلقائيًا هو السلوك الافتراضي لـ Emmet. معظم سيناريوهات الأبعاد في CSS (margin، padding، width، height، font-size) تستخدم px، لذا افتراض px يلغي 70% من كتابة الوحدات.

(2) الوحدات الصريحة: m10% m10em m10ex

إذا احتجت وحدة غير px، فقط ألحق حرف الوحدة بعد الرقم. يخرج Emmet اسم الوحدة كما هو.

(3) الأسماء المستعارة للوحدات: p e x

يوفر Emmet 3 أسماء مستعارة للوحدات لاختصار أسماء الوحدات الطويلة:

يمكن تكديس الأسماء المستعارة: m10p30e5x ← margin: 10% 30em 5ex.

ملاحظة: الأسماء المستعارة لا تعمل إلا عندما تكون مجاورة مباشرة للأرقام. في m10px، الحرف p هو الحرف الأوسط من px (وليس اسمًا مستعارًا)، لأن p ليس الحرف البادئ لوحدة. يحلل Emmet m10px كـ margin: 10px; (px وحدة صريحة). الاسم المستعار p لا ينطبق إلا عندما يتبع الرقم مباشرة p كرمز مستقل (مثال: w100p).

5. اختصار القيم المتعددة: فاصل الشرطة - + فاصل اللون #

يدعم اختصار CSS القيم المتعددة، مفصولة بشرطات -. يوفر Emmet أيضًا فاصل # لقيم الألوان (بما أن # هو الحرف البادئ لقيم الألوان).

(1) جدول قواعد اختصار القيم المتعددة

نقطة أساسية: توسيع القيم المتعددة يتبع معيار CSS — قيمة واحدة = كل الجوانب، قيمتان = أعلى-أسفل + يسار-يمين، 3 قيم = أعلى + يسار-يمين + أسفل، 4 قيم = أعلى + يمين + أسفل + يسار. هذا متسق تمامًا مع خصائص CSS متعددة القيم مثل margin و padding و border-radius و border-width.

(2) القيم المتعددة ذات الوحدات الصريحة يمكنها حذف الشرطات

إذا كانت كل قيمة لها وحدة صريحة (غير px/em الافتراضية)، يسمح Emmet بحذف الشرطات والتسلسل مباشرة:

نصيحة: عندما يحتوي الاختصار على # (لون) أو وحدات صريحة، يتعرف Emmet ذكيًا على حدود القيم بدون الحاجة للشرطات. هذا يسمح لاختصارات القيم المختلطة مثل bd5#0s (← border: 5px #000 solid) بالعمل بسلاسة.

(3) اختصار الألوان: فاصل #

اللون هو أحد القيم الأعلى تكرارًا في CSS. يستخدم Emmet # كحرف بداية اللون؛ # نفسه يعمل كفاصل قيم، لذا لا حاجة للشرطة.

نقطة أساسية: Emmet يبسط الألوان تلقائيًا — #1 يتوسع تلقائيًا إلى #111111، #e0 يتوسع تلقائيًا إلى #e0e0e0، #fc0 يتوسع تلقائيًا إلى #ffcc00. إذا كتبت لونًا كاملاً بـ 6 أحرف (مثال: #e0e0e0)، يتركه Emmet بدون تغيير. يتحكم في هذا السلوك إعداد css.color.short (ممكّن افتراضيًا).

(4) ! تفرض !important

أضف ! في نهاية اختصار CSS، ويضيف Emmet تلقائيًا لاحقة !important. هذه أداة أساسية لتجاوز أنماط الطرف الثالث وتصحيح الأخطاء.

ملاحظة: يجب وضع ! مباشرة في نهاية الاختصار بدون مسافة أو فاصل سابق. m10 ! غير صالح (يعامل Emmet m10 كاختصار كامل و ! كمحتوى في السطر التالي). لإضافة !important إلى اختصار متعدد القيم، ضع ! في النهاية: m10-20! ← margin: 10px 20px !important;.

6. مثال شامل: تنسيق بطاقة — 7 خصائص في سطر واحد

ادمج استنتاج الوحدات واختصار القيم المتعددة والألوان وتجاوز ! لكتابة نمط بطاقة متجر إلكتروني كامل.

▶ مثال: اختصار رقمي أساسي m10 p10 fz16 (الصعوبة ⭐)

ثلاث من الخصائص الرقمية الأكثر استخدامًا — إثبات أن اختصارات CSS في Emmet توفر حقًا نصف ضغطات المفاتيح.

الاختصار:

m10 p10 fz16

التوسيع:

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

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: ثلاثة اختصارات مستقلة، كل منها يتوسع بشكل منفصل. في `m10`، `m` هو الحرف الأول من margin، و10 هي القيمة، ويضيف Emmet px تلقائيًا ← `margin: 10px;`. `p10` يعمل بنفس الطريقة ← `padding: 10px;`. في `fz16`، `fz` هو الاسم المستعار لـ font-size (f + z مأخوذان من الأحرف الأولى لـ "font" و "size")، و16 تضيف px تلقائيًا ← `font-size: 16px;`. اختصارات CSS في Emmet هي أساسًا ترميز مضغوط "أحرف أولى للخاصية + قيمة".

▶ مثال: وحدات صريحة m10% c#f (الصعوبة ⭐)

وحدة % صريحة وتوسيع تلقائي للون بحرف واحد — عرض مرونة استنتاج الوحد��ت.

الاختصار:

m10% c#f

التوسيع:

margin: 10%;
color: #ffffff;

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: في `m10%`، `m` هي margin، و10 هي القيمة، و `%` هو حرف الوحدة الصريح (مجاور للرقم)؛ يخرجه Emmet كما هو ← `margin: 10%;`. في `c#f`، `c` هي color و `#f` هي قيمة اللون. عند رؤية لون بحرف واحد، يوسعه Emmet تلقائيًا إلى `#ffffff` وفق إعداد `css.color.short` (كل حرف يتكرر 6 مرات). إذا تم تعطيل الإعداد، يبقى الناتج `#f` — معظم المتصفحات الحديثة تدعم أيضًا الألوان بـ 3 أحرف وحرف واحد، لكن 6 أحرف تقدم أفضل توافق.

▶ مثال: اختصار القيم المتعددة m10-20 p10-20-30 bdrs5 (الصعوبة ⭐⭐)

اختصار الشرطة للقيم المتعددة — عرض أن أشكال القيمتين و3 قيم والقيمة الواحدة يمكن كتابتها كلها في سطر واحد.

الاختصار:

m10-20 p10-20-30 bdrs5

التوسيع:

margin: 10px 20px;
padding: 10px 20px 30px;
border-radius: 5px;

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: `m10-20` يستخدم شرطة لفصل قيمتين (10 و20)، كلتاهما تضيفان px تلقائيًا ← `margin: 10px 20px;` (دلالة CSS القياسية: أعلى-أسفل 10px، يسار-يمين 20px). `p10-20-30` يستخدم شرطات لفصل 3 قيم ← `padding: 10px 20px 30px;` (أعلى، يسار-يمين، أسفل). في `bdrs5`، `bdrs` هو الاسم المستعار لـ border-radius (مأخوذ من الأحرف الأولى لـ border + radius)، و5 تضيف px تلقائيًا ← `border-radius: 5px;`. الاختصارات الثلاثة تعرض مجموعة القواعد الكاملة لاختصار CSS متعدد القيم.

▶ مثال: اختصار الألوان c#fc0 bgc#f5f5f5 bd1-s#ccc (الصعوبة ⭐⭐)

اختصار اللون + الحدود — عرض أن # كفاصل قيم يجعل اختصارات القيم المختلطة تعمل بسلاسة.

الاختصار:

c#fc0 bgc#f5f5f5 bd1-s#ccc

التوسيع:

color: #ffcc00;
background-color: #f5f5f5;
border: 1px solid #ccc;

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: في `c#fc0`، `#` هو حرف بداية اللون؛ يرى Emmet `#` ويتعرف تلقائيًا على حدود قيمة اللون. `fc0` هو لون سداسي بـ 3 أحرف، ويوسعه Emmet تلقائيًا إلى `#ffcc00` وفق `css.color.short` (كل حرف يتضاعف). في `bgc#f5f5f5`، `bgc` هو الاسم المستعار لـ background-color، و `#f5f5f5` هو بالفعل لون بـ 6 أحرف — يتركه Emmet بدون تغيير. `bd1-s#ccc` هو اختصار مختلط كلاسيكي: `bd` = border، `1` = 1px (يضيف px تلقائيًا)، `-s` = solid (`s` هو الاسم المستعار لـ solid)، `#ccc` = لون الحدود. الأجزاء الثلا��ة تتسلسل بسلاسة إلى `border: 1px solid #ccc;`. اختصار "العرض + النمط + اللون" هذا هو اختصار حدود CSS الأعلى تكرارًا.

▶ مثال: علامة الأهمية ! — m10! fz16! (الصعوبة ⭐)

! يفرض !important — عرض أن إلحاق ! بنهاية اختصار Emmet هو الطريقة القياسية لتجاوز الأنماط.

الاختصار:

m10! fz16!

التوسيع:

margin: 10px !important;
font-size: 16px !important;

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: `!` هي لاحقة "علامة الأهمية" في اختصارات CSS في Emmet. تفرض إلحاق `!important;` في نهاية نتيجة التوسيع. `!` في نهاية `m10!` يحول `margin: 10px;` إلى `margin: 10px !important;` — في CSS، `!important` يتجاوز أي قاعدة ذات أولوية عادية ويستخدم عادة لتجاوز أنماط الطرف الثالث وتصحيح الأخطاء. لاحظ أن `!` يجب أن يكون مجاورًا مباشرة لنهاية الاختصار (بدون مسافات). لتجاوز اختصارات متعددة القيم مثل `m10-20`، ضع `!` في النهاية: `m10-20!` ← `margin: 10px 20px !important;`.

7. مثال كامل: بطاقة متجر إلكتروني — 7 خصائص في سطر واحد

ادمج استنتاج الوحدات والقيم المتعددة والألوان و ! لكتابة نمط بطاقة متجر إلكتروني كامل.

▶ مثال: نمط بطاقة متجر إلكتروني كامل (الصعوبة ⭐⭐)

الاختصار:

m10-20 p16 bdrs8 bgc#f5f5f5 c#333 fz14 bd1-s#e0e0e0

التوسيع:

margin: 10px 20px;
padding: 16px;
border-radius: 8px;
background-color: #f5f5f5;
color: #333333;
font-size: 14px;
border: 1px solid #e0e0e0;

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: سبعة اختصارات مستقلة مكتوبة في سطر واحد، تغطي جميع أبعاد نمط البطاقة — `m10-20` هامش أعلى-أسفل 10، يسار-يمين 20؛ `p16` حشوة كل الجوانب 16؛ `bdrs8` border-radius 8 بكسل؛ `bgc#f5f5f5` خلفية رمادية فاتحة؛ `c#333` نص رمادي داكن (`#333` يتوسع تلقائيًا إلى `#333333`)؛ `fz14` font-size 14 بكسل؛ `bd1-s#e0e0e0` حدود 1px صلبة رمادية فاتحة. الاختصار بالكامل 49 حرفًا، يتوسع إلى 7 أسطر CSS كاملة. الكتابة اليدوية تتطلب 7 أسطر × متوسط 18 حرفًا = 126 حرفًا + 7 ضغطات Tab + 7 فحوصات فواصل منقوطة؛ الآن 49 حرفًا في سطر واحد. اختصارات CSS في Emmet تقلل "حجم ضغطات المفاتيح" بنسبة 60%. كل آلية مغطاة في هذا الدرس — استنتاج الوحدات، القيم المتعددة، الألوان، القيم المختلطة — مطبقة في هذا السطر الواحد.

❓ أسئلة شائعة

📖 ملخص

• سياق CSS وسياق HTML مختلفان جذريًا: نفس m10 يكون <div class="m10"> في HTML لكن margin: 10px; في CSS
• قواعد استنتاج الوحد��ت: الأعداد الصحيحة تضيف px تلقائيًا (m10 ← margin: 10px;)، الأعداد العشرية تضيف em تلقائيًا (m1.5 ← margin: 1.5em;)
• الوحدات الصريحة: m10% ← margin: 10%;، m10em ← margin: 10em;، m10ex ← margin: 10ex;
• الأسماء المستعارة للوحدات: p ← %، e ← em، x ← ex (مثال: w100p ← width: 100%)
• شرطات القيم المتعددة: m10-20 ← margin: 10px 20px;، m10-20-30 ← 3 قيم
• فاصل اللون #: c#fc0 ← color: #ffcc00;، bd1-s#ccc ← border: 1px solid #ccc;
• ! يفرض !important: m10! ← margin: 10px !important;

📝 تمارين

1. أساسي (الصعوبة ⭐): في ملف .css، أدخل الاختصارات الستة m10، p10، w100، h200، fz16، bd1 واحدًا تلو الآخر، اضغط Tab، وسجل نتائج التوسيع. ثم أعد كتابتها بوحدات صريحة (مثال: m10em، p10%) وقارن الاختلافات عبر التوسيعات الـ 12.
2. متوسط (الصعوبة ⭐⭐): اكتب سطر Emmet واحد لخصائص زر شائعة 6 (margin قيمتان + padding قيمة واحدة + border-radius + background-color + color + font-size). المتطلبات: (أ) استخدم ألوانًا سداسية بـ 3 أحرف؛ (ب) border-radius بـ 5px صريح؛ (ج) font-size بلاحقة ! لفرض الأولوية. سجل التوسيع واشرح لماذا يجب فصل الاختصارات الستة بمسافات (وليس بشرطات).
3. متقدم (الصعوبة ⭐⭐⭐): اكتب نمط CSS كامل "لبطاقة تفاصيل منتج" (8 خصائص على الأقل). المتطلبات: (أ) تضمين هامش متعدد القيم (4 قيم)، حشوة متعددة القيم (قيمتان)، border-radius، background-color، color، font-size، border، box-shadow (اختصار bs)؛ (ب) اكتبها كلها في سطر Emmet واحد؛ (ج) خاصيتان على الأقل تستخدمان اختصار لون بـ 3 أحرف؛ (د) خاصية واحدة على الأقل بلاحقة !. تحقق من التوسيع واكتب تقرير مقارنة سرعة "اختصار CSS مقابل CSS مكتوب يدويًا" (كم تستغرق كتابة 8 أسطر يدويًا مقابل كم تستغرق اختصارات Emmet).

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

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

من نحن