𝗧𝗮𝗶𝗹𝘄𝗮𝗶𝗻𝗱 𝗖𝗦𝗦𝟰: لماذا تتوسع أنماط الـ Utility بشكل أفضل؟
يكره الكثير من المطورين رؤية فئات الـ utility في HTML؛ إذ يبدو الأمر فوضويًا، ويشبه أنماط التنسيق المضمنة (inline styles) القديمة التي تعلمت تجنبها. قد تعتقد أننا نعود إلى الوراء.
لكن CSS التقليدي يخلق مشكلة مختلفة.
تخيل ملف تنسيق (stylesheet) يحتوي على 5,000 سطر. كتب المطور (أ) فئة ما قبل عامين، والآن يريد المطور (ب) تغيير شيء صغير واحد، لكنه يخشى المساس بالفئة الأصلية؛ فهو لا يعرف ما إذا كان ذلك سيؤثر على صفحة مخفية. لذا، يقوم بإنشاء فئة جديدة بدلاً من ذلك.
يتسبب هذا في مشكلتين رئيسيتين:
- يزداد حجم حزمة CSS الخاصة بك في كل مرة تضيف فيها ميزة جديدة.
- تقضي ساعات في تسمية الأشياء مثل
.card-body-flex-inner.
يغير Tailwind CSS هذا النهج، حيث يستخدم فئات utility مثل bg-mint-500 أو p-4. توفر هذه الطريقة ميزتين رئيسيتتين:
أحجام حزم أصغر أنت تعيد استخدام نفس الفئات عبر تطبيقك بالكامل. لا ينمو ملف CSS الخاص بك بشكل خطي مع مشروعك؛ وسواء كان لديك عشر صفحات أو عشرة آلاف، سيبقى ملف CSS الخاص بك صغيرًا.
إعادة هيكلة (Refactoring) أكثر أمانًا تعيش جميع أنماط العنصر داخل ذلك المكون (component). إذا حذفت المكون، ستُحذف الأنماط معه. لن تتسبب في كسر شريط جانبي في صفحة أخرى عن طريق الخطأ.
قد تتساءل عن سهولة القراءة.
في تطوير الويب الحديث، تستخدم مكونات مثل React أو Vue. أنت لا تنظر إلى HTML فوضوي طوال اليوم؛ بل تقوم بتنسيق المكون مرة واحدة، ثم تستخدم وسمًا نظيفًا مثل <Card /> في تخطيطك الأساسي.
تظل التفاصيل الفوضوية داخل ملف المكون، وتظل بنيتك الأساسية نظيفة ويمكن التنبؤ بها.
لقد قايضنا جمالية التنسيق (markup) بصيانة أفضل. نحن نقبل الكود الفوضوي أثناء التطوير لضمان نظام إنتاج مستقر.
كيف تدير CSS الخاص بك؟ هل تحب فئات الـ utility؟