لماذا CSS لا يعمل؟ الأسباب الثمانية وحلولها

أكثر إحباط يعرفه متعلم CSS: تكتب القاعدة، تحفظ، تحدّث... ولا شيء يتغير. الصفحة تتجاهلك بصمت تام — بلا خطأ ولا تحذير.

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

جدول الفحص السريع — بالترتيب

1) الملف لا يصل أصلًا — افحصه قبل كل شيء

نصف الحالات هنا: مسار خاطئ في link، أو اسم ملف مختلف الحالة (لينكس يفرّق Style.css عن style.css — فخ شرحناه في 404).

اختبار الحسم بثوانٍ: أول سطر بالملف:

body { background: red !important; }

احمرّت؟ الملف يصل ومشكلتك لاحقة. لم تحمر؟ توقف عن كل شيء وأصلح الرابط:

<link rel="stylesheet" href="css/style.css">  <!-- طابق المسار حرفيًا -->

2) الكاش — عدو المطور اليومي

المتصفح يقدّم نسختك القديمة بإخلاص مزعج. Ctrl+Shift+R للتحديث القوي، والحل الدائم أثناء التطوير: DevTools مفتوحة + ✅ Disable cache في تبويب Network.

3) خطأ الكتابة الصامت — القاتل غير المرئي

CSS لا يصرخ عند الخطأ — يتجاهل القاعدة المكسورة وكل ما بعدها أحيانًا:

.card {
  color: #333;
  /* قوس الإغلاق ناقص هنا! */

.title {           /* ← هذه القاعدة وما بعدها قد تموت بصمت */
  font-size: 2rem;
}

قاعدتك «لا تعمل» وهي سليمة؟ افحص ما قبلها. محرر VS Code يلوّن هذه الكوارث — صدّق تلويناته.

4) المحدد لا يطابق — راجع الأساسيات بثقة

• .card بنقطة للكلاس و#header بشباك للـ id — الخلط بينهما كلاسيكي.
• تهجئة مختلفة بين HTML وCSS (btn-primary مقابل btn_primary).
• مسافة فارقة: .a .b (ب داخل أ) غير .a.b (العنصر يحمل الاثنين).

فحص القطع: من DevTools جرّب document.querySelector(".محددك") في الـ Console — null؟ محددك لا يمسك شيئًا.

5) Specificity — قاعدة أقوى تشطبك

انقر العنصر بزر الفأرة الأيمن → Inspect → لوحة Styles: قاعدتك ظاهرة مشطوبة؟ خاصية أقوى غلبتها. سلم القوة باختصار: أنماط inline تغلب الـ id، والـ id يغلب الكلاسات، والكلاسات تغلب أسماء الوسوم — وعند التعادل الأخير في الملف يفوز.

الحل الصحيح: ارفع خصوصية محددك أو أعد ترتيب ملفك — لا ترش !important (انظر الأسئلة الشائعة).

6) الخاصية لا تنطبق على هذا النوع أصلًا

أشهرها: width وheight على عنصر inline (مثل span) لا تعمل حتى تغيّر عرضه — تفاصيلها في صفحة display بمرجعنا. ومثلها justify-content على عنصر ليس حاوية flex/grid.

7-8) الترتيب والوراثة

ملفان يعرّفان نفس القاعدة؟ المُحمّل آخرًا يفوز — مكتبة CSS بعد ملفك تدهسك. ولوحة Computed في DevTools تريك القيمة النهائية الفائزة ومصدرها بالسطر — نهاية كل جدال.

قائمة تحقّق سريعة

• خلفية حمراء أول الملف — يصل أم لا؟ ثم كل شيء.
• Ctrl+Shift+R قبل أي استنتاج.
• القاعدة سليمة؟ افحص الأسطر قبلها.
• querySelector بالكونسول يثبت مطابقة المحدد.
• Styles المشطوبة تفضح غالِبك — عالج الخصوصية بلا !important.

الخلاصة

CSS «الذي لا يعمل» يعمل دائمًا — لكنه يطيع قواعد التحميل والمطابقة والغلبة بصرامة صامتة. رتّب فحصك: الوصول ← الكاش ← الكتابة ← المطابقة ← الغلبة، ودع DevTools تنطق بما يخفيه الصمت.

أتقن الأساس من مسار CSS الكامل بالعربي وراجع خصائصه سريعًا في مرجع CSS التفاعلي، وكمّل مع الفرق بين Flexbox و Grid.