4.5CSS مخصّص وسمات
الأساسي في 30 ثانية
- الـ CSS المخصّص (Pro) يضيف شيفرة على عنصر/الصفحة، للحالات المتقدّمة غير المُغطّاة بالواجهة.
- الأصناف والسمات المخصّصة تساعد على استهداف الأنماط وإعادة استخدامها.
- قاعدة: تكملة، لا الوضع العاديّ؛ CSS كثير مُبعثَر يضرّ بـ قابلية الصيانة.
الخيط الناظم — نادية من أجل لمسة أخيرة
تريد نادية تأثيرًا صغيرًا دقيقًا على زر لا تُقدّمه الواجهة. بدل الارتجال، تضيف سطرَين من CSS مُستهدَفَين عبر صنف قابل لإعادة الاستخدام. تُقاوم إغراء برمجة كل شيء: 95 % من الموقع يُصنع بالواجهة، ويبقى CSS استثناءً للمسات الأخيرة.
القسم الأخير من المستوى 4 — اللمسة الأخيرة، بقَدْر.
1. CSS، أصناف، سمات
Elementor Pro يتيح إضافة CSS مخصّص (تبويب المتقدّم ← CSS مخصّص) على عنصر أو لكامل الصفحة: مفيد لضبط دقيق لا تُقدّمه الواجهة. أصناف CSS المُضافة إلى عناصر تتيح استهدافها في CSS وإعادة استخدام نمط. والسمات المخصّصة (أزواج مفتاح/قيمة) تضيف سمات HTML، مثلًا لتكامل خارجيّ.
تنشئ نادية صنف «btn-devis» وتطبّق عليه تأثيرها الصغير: قابل لإعادة الاستخدام على كل الأزرار المعنيّة.
2. تكملة، لا الوضع العاديّ
نقطة حاسمة: الـ CSS والسمات تكملة للحالات المتقدّمة — لا الطريقة العادية للعمل. الأغلبية الساحقة من التصميم تُصنع بالواجهة (النمط، المتقدّم، دليل الأسلوب العامّ).
لا تُفرِط: CSS مخصّص كثير مُبعثَر يجعل الموقع صعب الصيانة (لم تعد تعرف أين ماذا). فضّل الأصناف القابلة لإعادة الاستخدام وعلّق الشيفرة. تُبقي نادية CSS نادرًا، مُستهدَفًا ومُوثَّقًا.
🔎 مثال ملموس — تأثير دقيق، قابل لإعادة الاستخدام (حالة نادية)
الصنف: btn-devis
CSS مخصّص (مُستهدَف):
selector:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
→ طبّق الصنف «btn-devis» على الأزرار المعنيّة.
→ قابل لإعادة الاستخدام، مُوثَّق، والواجهة تُدير الباقي.النتيجة: لمسة دقيقة، نظيفة وقابلة لإعادة الاستخدام.
الدرس: CSS كتكملة، عبر أصناف.
مفردات القسم
- الـ CSS المخصّص (Pro)
- إضافة CSS على عنصر أو الصفحة لضبط دقيق غير مُغطّى بالواجهة.
مثال بسيط: تأثير تمرير بالمؤشّر دقيق على زر.
ما ليس كذلك: تنميق كل شيء بـ CSS بينما الواجهة تكفي.
رد فعل: CSS فقط حين لا تكفي الواجهة.
- أصناف CSS
- أصناف مُضافة إلى العناصر لاستهدافها وإعادة استخدام نمط.
مثال بسيط: صنف «btn-devis» مُطبَّق على عدّة أزرار.
ما ليس كذلك: نسخ الـ CSS نفسه على كل عنصر.
رد فعل: نمط مُعاد استخدامه → صنف، لا نسخ ولصق.
- السمات المخصّصة
- أزواج مفتاح/قيمة تضيف سمات HTML (مثلًا لتكامل).
مثال بسيط: سمة يطلبها نصّ برمجيّ خارجيّ.
ما ليس كذلك: إضافة سمات عشوائيًا.
رد فعل: سمة إن طلبتها خدمة.
- تكملة، لا الوضع العاديّ
- الـ CSS/السمات تخدم الحالات المتقدّمة؛ الجوهريّ يُصنع بالواجهة.
مثال بسيط: 95 % بالواجهة، CSS للمسة.
ما ليس كذلك: إعادة برمجة ما تُقدّمه الواجهة بـ CSS.
رد فعل: الواجهة أولًا، CSS كملاذ أخير.
- قابلية الصيانة
- CSS كثير مُبعثَر يجعل الموقع صعب الصيانة.
مثال بسيط: CSS نادر، مُجمَّع في أصناف، مُعلَّق.
ما ليس كذلك: قطع CSS في كل مكان، بلا منطق.
رد فعل: وثّق وامركِز الـ CSS.
في التطبيق — إضافة لمسة CSS بنظافة
- حدّد ضبطًا دقيقًا غير مُغطّى بالواجهة.
- أنشئ صنفًا قابلًا لإعادة الاستخدام وطبّق عليه CSS مُستهدَفًا.
- طبّق الصنف على العناصر المعنيّة (بدل CSS منسوخ في كل مكان).
- علّق الـ CSS وتحقّق من أن الجوهريّ يبقى مُدارًا بالواجهة.
نصّ جاهز للقول — تأطير استخدام الـ CSS (20 ث)
«كل موقعك تقريبًا مبنيّ بصريًا، ما يجعله سهل التطوّر. من أجل لمستَين أو ثلاث دقيقة، أضيف قليلًا من الشيفرة المُستهدَفة والمُوثَّقة — دون إفراط، كي يبقى الموقع بسيط الصيانة مع الزمن.»
اطمئن: يبقى الـ CSS استثناءً، ويبقى الموقع قابلًا للصيانة.
قالب للنسخ واللصق — ملاحظة CSS
حاجة متقدّمة (غير مُغطّاة بالواجهة): _______________
صنف قابل لإعادة الاستخدام: _______________
CSS (مُستهدَف، مُعلَّق): _______________
مُطبَّق عبر الصنف (لا منسوخ في كل مكان): نعم / لا
الجوهريّ يبقى بالواجهة: نعم / لالمسة وحيدة
تأثير دقيق على عنصر: CSS مُستهدَف، مُوثَّق.
نمط مُعاد
صنف مُطبَّق على عدّة عناصر متشابهة.
تكامل خارجيّ
سمة يطلبها نصّ برمجيّ خارجيّ.
مبتدئ
ابقَ بالواجهة: سيأتي الـ CSS لحاجات متقدّمة فعلية.
✓ ممارسات جيدة
- استخدم الـ CSS كتكملة، لا افتراضيًا.
- فضّل أصنافًا قابلة لإعادة الاستخدام.
- علّق وامركِز الـ CSS.
✗ أخطاء شائعة
- إعادة برمجة ما تفعله الواجهة أصلًا بـ CSS.
- CSS مُبعثَر غير مُوثَّق.
- نسخ الـ CSS نفسه بدل صنف.
النقاط الأساسية
- CSS مخصّص (Pro) = حالات متقدّمة.
- أصناف = استهداف وإعادة استخدام.
- سمات = متطلّبات تكامل.
- تكملة للواجهة، مُوثَّقة ونادرة.
تحدّي 48 ساعة — طبّق غدًا
أنشئ صنفًا قابلًا لإعادة الاستخدام بـ CSS صغير مُستهدَف (مثلًا تأثير تمرير بالمؤشّر)، طبّقه على عدّة أزرار، علّق الشيفرة، وتحقّق من أن باقي التصميم يمرّ عبر الواجهة. 20 دقيقة.
- أستخدم الـ CSS كتكملة مُستهدَفة.
- أنشئ أصنافًا قابلة لإعادة الاستخدام.
- أوثّق وأمركِز الـ CSS.
أسئلة شائعة
هل يجب أن أتعلّم CSS لاستخدام Elementor؟
لا للجوهريّ: 95 % يُصنع بالواجهة. الـ CSS المخصّص تكملة للمسات متقدّمة؛ بعض الأساسيات تساعد، لكنها ليست لازمة في البداية.
ما فائدة أصناف CSS؟
استهداف عناصر وإعادة استخدام نمط: تطبّق الصنف نفسه على عدّة عناصر بدل نسخ الشيفرة نفسها في كل مكان — أنظف وأقبل للصيانة.
هل قد يطرح الـ CSS المخصّص مشكلة؟
بإفراط وبعثرة، نعم: يصير الموقع صعب الصيانة. أبقِه نادرًا، مُجمَّعًا في أصناف ومُعلَّقًا؛ واصنع الجوهريّ بالواجهة.
تحتاج نادية تأثيرًا صغيرًا لا يُقدّمه Elementor في الواجهة. ما النهج الصحيح؟