أفضل الممارسات والتحسين و SASS

تنظيم CSS

كودك يكبر بسرعة — نظّمه من البداية:

• استخدم أسماء فئات واضحة وثابتة (مثل منهجية BEM): .card__title--large.
• اجمع المتغيّرات (الألوان، المسافات) في :root.
• رتّب القواعد منطقيًا (تخطيط ← ألوان ← خطوط).
• تجنّب !important والمحدّدات شديدة التعقيد.

التحسين (Optimization) — أداء أسرع

• قلّل حجم CSS: احذف القواعد غير المستخدمة، واستخدم أدوات الضغط (Minify).
• افصل CSS في ملف خارجي ليُخزَّن في الكاش.
• فضّل transform/opacity للحركات (لا تُعيد حساب التخطيط).
• تجنّب المحدّدات العميقة (div > ul > li > a) → أبطأ وأصعب صيانة.

إمكانية الوصول في CSS (Accessibility)

• لا تُزل outline عند التركيز دون بديل واضح:

button:focus-visible {
  outline: 2px solid #b026ff;   /* مؤشّر تركيز واضح */
}

• تباين ألوان كافٍ بين النص والخلفية (4.5:1).
• لا تعتمد على اللون وحده لنقل المعنى (أضف أيقونة/نصًّا).
• احترم تفضيل تقليل الحركة:

@media (prefers-reduced-motion: reduce) {
  * { animation: none; transition: none; }
}

مقدمة في SASS

SASS مُعالِج CSS (Preprocessor) يضيف ميزات قوية تُترجَم إلى CSS عادي. أبرز ميزاته:

المتغيّرات والتداخل (Nesting)

$primary: #b026ff;

.card {
  color: $primary;
  .title {           /* تداخل! */
    font-size: 20px;
    &:hover { color: $primary; }
  }
}

الدوال والقوالب (Mixins)

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box { @include flex-center; }

🔑 SASS لا يعمل في المتصفح مباشرةً — يُترجَم إلى CSS عادي عبر أداة بناء. مفيد للمشاريع الكبيرة.

الأخطاء الشائعة

• ❌ إزالة outline بلا بديل → كارثة للوصول بلوحة المفاتيح.
• ❌ ملفات CSS ضخمة بلا تنظيم → صعبة الصيانة.
• ❌ تجاهل prefers-reduced-motion → إزعاج لمن يتأثّر بالحركة.

خلاصة

نظّم CSS بأسماء واضحة ومتغيّرات، وحسّنه (ضغط، حركات خفيفة، محدّدات بسيطة)، واجعله قابلًا للوصول (مؤشّر تركيز، تباين، تقليل الحركة). وعند الكبر، فكّر في SASS لميزات التداخل والـ mixins.