معمارية CSS: BEM والنهج القائم على الأدوات وتنظيم الملفات

قارِن بين BEM والنهج القائم على الأدوات، ومقايضاتهما الحقيقية داخل الفريق، ونظّم ملفاتك بطبقات التتالي.

11 دقيقة · 3 أسئلة

‏CSS لا تنهار على مقياس المكوّن، بل تنهار على مقياس المشروع: خصوصية تتسلق فقط لـ"الفوز" على قاعدة قائمة، وخوف من حذف شيفرة لا تعرف مداها، وأنماط تتسرب من شاشة إلى أخرى. معمارية CSS هي قبل كل شيء استراتيجية لإدارة الخصوصية والنطاق. المدرستان المهيمنتان، BEM والنهج القائم على الأدوات، تجيبان عن المشكلة نفسها بمسارين متعاكسين.

‏BEM (Block، Element، Modifier) يسمّي كل عقدة منسّقة: .card (كتلة قائمة بذاتها)، .card__title (عنصر تابع للكتلة)، .card--featured (نوع من الكتلة). يضمن الاصطلاح خصوصية مسطّحة - صنف واحد في كل مكان، ولا محدِّد أحفاد أبدًا - فلا تعارضات في الترتيب، واسم يوثّق الملكية. الكلفة: اختراع أسماء باستمرار، وتكرار حقيقي للقيم (نفس margin-top: 16px تُعاد كتابته في عشرين كتلة).

.card {
  padding: 16px;
  border-radius: 8px;
}

.card__title {
  font-size: 1.25rem;
}

.card__title--muted {
  color: #6b7280;
}

.card--featured {
  border: 2px solid var(--brand);
}

أما النهج القائم على الأدوات (وTailwind تجسيده المهيمن) فيقلب المنطق: لا أسماء بعد الآن، فقط أصناف ذرّية أحادية المسؤولية تُركَّب في الـ HTML. الفوائد قابلة للقياس: صفر جهد تسمية، وأنماط مُجاورة للترميز (حذف المكوّن يحذف أنماطه)، وحزمة CSS نهائية يبقى حجمها شبه ثابت لأن الأدوات مشتركة. والمقايضات أيضًا: HTML مطوّل، وتكرار انتقل إلى الترميز يتطلب طبقة مكوّنات (React، Vue، جزئيات) للبقاء غير مكرَّر، ومنحنى تعلّم للمفردات.

<article class="flex flex-col gap-4 rounded-lg
  border border-gray-200 p-4 shadow-sm">
  <h2 class="text-lg font-semibold">Invoice</h2>
  <p class="text-sm text-gray-600">
    Paid on March 12
  </p>
</article>

هذان النهجان ليسا متنافيين: كثير من الفرق الناضجة تدمجهما - أدوات للتخطيط والتباعد، وأصناف مكوّنات (BEM أو CSS Modules) للأنماط والحالات المعقدة. أما بخصوص تنظيم الملفات، فمبدأ ITCSS يبقى المرجع: الترتيب من العام إلى الخاص (إعادة الضبط، العناصر الأساسية، المكوّنات، الأدوات). والقاعدة الأصيلة @layer تحوّل هذا الاصطلاح إلى ضمان على مستوى المحرك: الأولوية بين الطبقات مستقلة عن خصوصية المحدِّدات التي تحتويها.

@layer reset, base, components, utilities;

@layer base {
  h2 { font-size: 1.5rem; }
}

@layer components {
  #hero .btn { padding: 12px 24px; }
}

@layer utilities {
  .p-0 { padding: 0; }
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. في .card__title--muted، ماذا يدل عليه المقطع --muted؟
   • خاصية CSS مخصصة
   • معدِّل: نوع من عنصر card__title
   • عنصر ابن لـ card__title
   • حالة يديرها JavaScript
2. ما الإسهام الرئيسي لـ @layer في التتالي؟
   • يزيد خصوصية محدِّدات الطبقة
   • يجعل ترتيب الطبقات يسبق خصوصية المحدِّد
   • يعزل أنماط مكوّن كما يفعل Shadow DOM
   • يحمّل الطبقات بالتوازي لتسريع التصيير
3. ما المقايضة التي تقبلها عند تبنّي نهج قائم على الأدوات؟
   • ملف CSS ينمو بتناسب مع عدد الصفحات
   • خصوصية عالية يصعب تجاوزها
   • HTML مطوّل يعتمد إزالة تكراره على طبقة مكوّنات