لماذا نستخدم الفئات الوظيفية

افتح ملف main.css في مشروع عمره عامان. يبلغ طوله 4200 سطر. تجد فيه .card، ثم .card--compact، ثم .card--compact-sidebar، وأخيرًا .sidebar .card--compact { padding: 12px !important; } أُضيفت مساء يوم جمعة. مهمتك اليوم هي تقليص الحشو الداخلي لبطاقة واحدة في صفحة واحدة. لا تعرف من يستخدم .card--compact في أماكن أخرى: البحث النصي الكامل يُظهر أحد عشر قالبًا، ولا توجد لديك وسيلة للتحقق سوى فتح جميع صفحات الموقع. لذلك لا تقترب منها. تضيف قاعدة ثانية عشرة باسم أدق قليلًا، فيزداد حجم الملف مرة أخرى.

هذا ليس عيبًا في الانضباط، بل هو خاصية في اللغة نفسها. فنطاق CSS عام، ولا يوجد فيه جامع نفايات: لا شيء يُنبّهك إلى أن قاعدة ما ميتة، ولا شيء يمنعك من كتابة قاعدة تلغي أخرى عن بُعد، كما أن الخصوصية (specificity) تحوّل كل إصلاح إلى مزايدة. تتصرف ورقة الأنماط كمتغيّر عام تشترك فيه كل الصفحات، ويمكن تعديله من أي مكان، دون اختبارات انحدار. وبعد عامين، تصبح العملية الوحيدة التي تتيقن أنها لن تكسر شيئًا هي الإضافة. ولهذا السبب بالتحديد لا تتقلص هذه الملفات أبدًا.

ما الذي تغيّره الفئة الوظيفية

تؤدي الفئة الوظيفية شيئًا واحدًا فقط. pt-4 تكتب padding-top: 1rem، وtext-sm تكتب حجم الخط وارتفاع السطر، وbg-white تكتب لون الخلفية. الاسم يصف الأثر، ولا يصف أبدًا القصد التحريري. لم تعد تركّب مفاهيم («بطاقة مدمجة»)، بل تركّب تصريحات (declarations) مباشرة داخل الشيفرة الوصفية.