3. ربط CSS: الأنماط المضمنة (تجنبها!)

هناك ثلاث طرق أساسية لربط CSS بمستند HTML. الطريقة الأولى هي الأنماط المضمنة (Inline Styles)، والتي تطبق التنسيقات مباشرة على عنصر HTML معين باستخدام سمة style.

كيف تعمل الأنماط المضمنة

تُكتب الأنماط المضمنة مباشرة داخل وسم البداية لعنصر HTML.

html

هذا العنوان منسق داخلياً

هذه الفقرة لها تنسيق منفصل.

في المثال أعلاه، يتم استبدال كتلة الإعلان (الجزء الموجود داخل الأقواس المتعرجة {}) بمحتوى سمة style.

متى تستخدم (وتتجنب) الأنماط المضمنة

القاعدة: بشكل عام، تجنب الأنماط المضمنة.

تخلط الأنماط المضمنة بين العرض (CSS) والهيكل (HTML)، مما ينتهك مبدأ فصل المهام. هذا يجعل التعليمات البرمجية صعبة الصيانة وإعادة الاستخدام وتصحيح الأخطاء.

لماذا هي مشكلة:

كابوس الصيانة: لتغيير لون جميع الفقرات، سيتعين عليك تعديل كل وسم <p> على حدة.
مشاكل التخصيص (Specificity): تتمتع الأنماط المضمنة بأعلى مستوى من التخصيص (سنغطي هذا قريباً)، مما يلغي تقريباً جميع قواعد CSS الأخرى. وهذا يجعل تجاوزها لاحقاً أمراً صعباً للغاية.

الاستثناءات الوحيدة (نادرة):

عند استخدام JavaScript لحساب وتعيين أنماط معينة ديناميكياً.
في بعض حالات تطوير البريد الإلكتروني (Email HTML) حيث يكون دعم ملفات التنسيق الخارجية ضعيفاً.