إعادة تعيين CSS و CSS الذري

إعادة تعيين CSS

متصفحات مختلفة لديها أنماط افتراضية مختلفة. إعادة تعيين CSS تُلغي هذه الاختلافات لعرض متسق.

إعادة تعيين أساسية

/* إعادة تعيين شاملة */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* أنماط body أساسية */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* إعادة تعيين الروابط */
a {
  text-decoration: none;
  color: inherit;
}

/* صورة متجاوبة */
img {
  max-width: 100%;
  display: block;
}

Normalize.css مقابل إعادة التعيين

توصية: استخدم Normalize.css لمعظم المشاريع.

CSS الذري

كل فئة تفعل شيئاً واحداً — كتلبناء:

مثال

<style>
.text-center { text-align: center; }
.text-red { color: red; }
.mt-10 { margin-top: 10px; }
.p-20 { padding: 20px; }
.bg-light { background-color: #f5f5f5; }
.border { border: 1px solid #ddd; }
.rounded { border-radius: 4px; }
</style>
<div class="p-20 bg-light border rounded">
  <h3 class="text-center">عنوان البطاقة</h3>
  <p class="mt-10">محتوى البطاقة</p>
</div>

الفوائد

1. دقيق: كل فئة تفعل شيئاً واحداً، تركيبات مرنة
2. قابل لإعادة استخدام عالي: .flex واحد يعمل في أي مكان
3. CSS أصغر: لا تكرار لتصريحات الخصائص
4. تغييرات آمنة: تعديل فئة واحدة لن يكسر عناصر غير ذات صلة

❓ أسئلة شائعة

📖 ملخص

• إعادة تعيين CSS تُلغي اختلافات أنماط المتصفح الافتراضية — أساس المشروع
• CSS الذري يوفر كتابة بنمط "كتلبناء" — كل فئة تفعل شيئاً واحداً، ادمج حسب الحاجة
• في الممارسة، إعادة تعيين والفئات الذرية عادةً تعيش في ورقة نمط أساسية واحدة كنقطة بداية لجميع الصفحات

📝 تمارين

1. أنشئ ملف reset.css بـ: إعادة تعيين شاملة margin/padding/box-sizing، font/color أساسية لـ body، إعادة تعيين نمط روابط، صور متجاوبة.
2. أضف 10 فئات ذرية شائعة على الأقل إلى reset.css (flex، مسافات، محاذاة نص، إلخ).
3. أنشئ صفحة HTML تستخدم فقط فئات ذرية من reset.css لتخطيط بطاقة بسيطة (عنوان، نص، صورة).