HTML وCSS / أنظمة عرض قابلة للصيانة / الدرس 13
معمارية CSS وطبقات التتالي
امنح الأنماط ملكية وترتيبا واضحين لتتطور المكونات دون تصعيد تعقيد المحددات.
في هذه الصفحة
أهداف الدرس
- تحديد المسؤوليات قبل التسمية
- عرض أولوية الطبقة دون إجبار
- مراجعة المعمارية بسيناريوهات تغيير
تحديد المسؤوليات قبل التسمية
تفصل الصيانة الافتراضيات العامة والتخطيط والمكونات والاستثناءات. تهم قابلية توقع موضع القاعدة ومالكها أكثر من اسم المنهج. تجنب سلسلة تداخل عرضية تغيرها إضافة محتوى صغيرة. توفر الأصناف عقدا أوضح وتعرض السمات الحالة للتنسيق. لا تنفذ المعمارية الدلالات والتحقق وإدارة الحالة؛ بل تنظم العرض ليتعاون مع الطبقات الأخرى دون اعتماديات مخفية.
توضيح ترتيب الأنماط العادية بالطبقات
تحدد الطبقات ترتيبا داخل الجهة قبل الخصوصية. تتقدم الطبقة اللاحقة للتصريحات العادية، وتتقدم الأنماط العادية غير الطبقية على الطبقية. تعكس التصريحات المهمة ترتيب الطبقات، فلا تكفي قاعدة «الأخير يفوز». يحدد الظهور الأول الترتيب ويمكن إعلانه مبكرا. يحتاج إدخال الطبقات إلى خطة؛ فقد تهيمن الأنماط القديمة غير الطبقية على مكون جديد مغلف وحده.
عرض أولوية الطبقة دون إجبار
يضع المثال معرفا قويا في طبقة أساس وصنفا في طبقة مكونات لاحقة. لأنهما عاديان تفوز طبقة المكونات رغم خصوصيتها الأقل. إنه توضيح ترتيب لا توصية بمعرفات في الأساس. يعلن البيان العلاقة قبل الكتلتين. قلل الاستثناءات المهمة ووثقها لأن عكس ترتيبها قد يخفي المعمارية المقصودة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layer precedence</title>
<style>
@layer base, components;
@layer base { #topic { color: #8b0000; } }
@layer components { .title { color: #174e9a; } }
</style>
</head>
<body>
<main><h1 id="topic" class="title">Layered color</h1></main>
</body>
</html>
The heading color is #174e9a.تفوز طبقة المكونات اللاحقة قبل مقارنة الخصوصية فيستخدم العنوان الأزرق. النتيجة المتوقعة: لون العنوان #174e9a.
افتراضيات سهلة التجاوز
تضيف :where خصوصية صفرية لحجتها فتفيد الافتراضيات السهلة. تختلف :is و:not وتأخذان خصوصية من القوائم وفق القواعد؛ فلا يعني التشابه تطابق الأثر. يضع المثال أساس لوحة وتغييرا بصنف. غير الخصائص اللازمة دون نسخ الكتلة كلها لتقليل التباعد وتسهيل تعديل الرموز. افحص المطابقة والسياق؛ فالصفر لا يعني انعدام الأثر.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Low-specificity defaults</title>
<style>
:where(.panel) { padding: 1rem; border: 1px solid #555; background: #f3f3f3; } .featured { background: #e5efff; }
</style>
</head>
<body>
<main><h1>Panel variants</h1><section class="panel"><h2>Default</h2><p>Ordinary panel.</p></section><section class="panel featured"><h2>Featured</h2><p>A deliberate variation.</p></section></main>
</body>
</html>
Both panels share structure; the featured panel has a different background.يقدم الافتراضي بنية مشتركة ويغير الصنف خاصية واحدة دون نسخ المكون. النتيجة المتوقعة: تتشابه البنية وتختلف خلفية اللوحة المميزة.
مراجعة المعمارية بسيناريوهات تغيير
اسأل كيف تغير الثيمة والودجت والتعطيل والتداخل قصة التجاوز. افحص الفائز واحذف القديم بدلا من حفظ كل حل تاريخي. صغر خطافات المكون العامة ولا تنسق داخليات اعتماد متقلبة. يجمع البناء الملفات ولا يصلح ملكية متناقضة أو حالات غير ميسرة. اختبر التركيبات لأن الخطوط والخصائص الموروثة والمحددات العامة تربط المكونات. تنجح المعمارية حين يفسر المراجع القيمة دون تفتيش كل الملفات.
الأخطاء الشائعة وإصلاحها
يخسر مكون طبقي لقاعدة بسيطة
- لماذا يحدث؟
- القاعدة القديمة عادية غير طبقية.
- كيف تصلحه؟
- راجع النقل والترتيب كاملا.
- كيف تتجنب تكراره؟
- وثق الأنماط غير الطبقية.
يسلك تجاوز مهم عكس التوقع
- لماذا يحدث؟
- انعكس ترتيب الطبقات المهمة.
- كيف تصلحه؟
- افحص الأهمية والطبقة معا.
- كيف تتجنب تكراره؟
- تجنب المهم غير المبرر.
تتباعد التنويعات بعد الصيانة
- لماذا يحدث؟
- نُسخ المكون لتغييرات صغيرة.
- كيف تصلحه؟
- شارك الأساس وغير الاختلاف المقصود.
- كيف تتجنب تكراره؟
- راجع عقد التنويعات.
اختبر فهمك
1. توقع لون .title عادي غير طبقي مقابل معرف عادي داخل طبقة.
اعرض الحل المشروح
يتقدم العادي غير الطبقي قبل الخصوصية مع المطابقة والجهة نفسها. يوضح ذلك وجوب حساب الأنماط غير الطبقية في النقل بدلا من تقوية المعرف.
2. صمم عقد تنسيق صغيرا لبطاقة بتحذير.
اعرض الحل المشروح
استخدم صنف بطاقة للبنية وآخر للتحذير أو سمة حالة للاختلاف الموثق. احفظ نص التحذير ومعناه في HTML وضع القواعد بطبقة المكونات واختبر التداخل.
أهم ما تعلمته
- ترتب الطبقات الأنماط العادية قبل الخصوصية.
- تختلف أولوية الطبقات المهمة.
- تتفوق الملكية الواضحة على تصعيد المحددات.