تزودنا مكتبات (CSS-in-JS) بنهج جديد لكتابة (CSS)، وهي تهدف إلى معالجة قيود (CSS)، مثل الافتقار إلى الوظائف الديناميكية وتحديد النطاق وقابلية النقل.
ما المقصود بتقنية التصميم CSS-in-JS
(CSS-in-JS) هي في الواقع مكتبة (JavaScript) تجمع كل مكون (JavaScript) بكل قواعد (CSS) الخاصة به وتبعياته، نتيجةً لذلك، يمكن تشغيل المكونات بشكل مستقل، دون الاعتماد على أي ملف (CSS) خارجي، حيث أنه باستخدام مكتبات (CSS-in-JS)، يمكنك كتابة جميع ملفات (CSS) الخاصة بك داخل ملفات (.js) حتى تتمكن من العمل كوحدات (JavaScript).
ما هي مزايا CSS-in-JS
1. تحديد النطاق المحلي
بشكل افتراضي، لا تسمح (CSS) بتحديد النطاق المحلي، حيث أن كل قاعدة نمط لها نطاق عام، لذلك فهي تنطبق على المشروع بأكمله، ونتيجةً لذلك، يمكن للأنماط أن تتجاوز بعضها البعض بطرق مدهشة، حيث أنشأ مطورو الواجهة الأمامية منهجيات متعددة تضيف نمطية إلى (CSS)، مثل: (BEM و OOCSS و SMACSS)، كما تعتبر المعالجات المسبقة و(PostCSS) طريقة أخرى لتكوين وحدات (CSS)، وتأخذ مكتبات (CSS-in-JS) هذا المفهوم إلى المستوى التالي من خلال أتمتة تحديد النطاق، مما يؤدي إلى مستوى عالٍ من القدرة على التنبؤ.
2. التضمين
يسهل التضمين الصيانة ويزيل الأخطاء، حيث يمكنك تعديل جميع التعليمات البرمجية المتعلقة بالمكونات في نفس المكان، دون الحاجة إلى القلق بشأن تغيير أجزاء أخرى من التطبيق بشكل غير متوقع.
3. قابلية التنقل
نظرًا لأن المكونات تتضمن جميع التعليمات البرمجية المصدر والأنماط والمنطق التي تحتاجها للتشغيل الصحيح، يمكنك نقلها بأمان، إنها تعمل بشكل أساسي خارج منطقة التنفيذ وتتيح لك إنشاء تطبيقات غير مترابطة تتواصل فيها المكونات مع بعضها البعض فقط عبر واجهات برمجة التطبيقات.
4. إعادة الاستخدام
المكونات قابلة لإعادة الاستخدام، لذا ما عليك سوى كتابتها مرة واحدة، ثم يمكنك تشغيلها في كل مكان، لا يمكنك فقط إعادة استخدام المكونات داخل نفس التطبيق ولكن أيضًا في تطبيقات أخرى تم إنشاؤها باستخدام نفس إطار العمل.
5. الوظائف الديناميكية
نظرًا لأن (CSS-in-JS) هو في الأساس رمز (JavaScript)، يمكنك تطبيق منطق معقد على قواعد النمط الخاصة بك، لذلك، يعد حلاً مثاليًا إذا كنت بحاجة إلى إنشاء واجهة مستخدم معقدة تتطلب وظائف ديناميكية.
ما هي عيوب CSS-in-JS
على الرغم من أن مكتبات (CSS-in-JS) تسمح لك بإنشاء تطبيقات قائمة على المكونات بطريقة منطقية وفعالة، إلا أنها تتمتع أيضًا ببعض الخصائص التي قد تجعلك حذرًا منها، وهي:
1. منحنى التعلم
من المؤكد أن (CSS-in-JS) لديها منحنى تعليمي، خاصةً إذا كنت لم تستخدم أطر عمل قائمة على المكونات ولا مكونات ويب من قبل، إلى جانب تعلم الصيغة الجديدة، تحتاج أيضًا إلى اختيار طريقة جديدة في التفكير، والتي تحتاج إلى وقت وقد تؤدي إلى إبطاء سير عمل التطوير لديك لفترة من الوقت.
2. طبقة إضافية من التعقيد
يؤدي استخدام مكتبة (CSS-in-JS) إلى إضافة طبقة إضافية إلى حزمة الواجهة الأمامية، والتي قد تكون أحيانًا غير ضرورية.
متى يجب عليك استخدام مكتبات CSS-in-JS
توفر لك مكتبات (CSS-in-JS) منهجية واضحة وآمنة للتطبيقات القائمة على المكونات، إلى جانب أطر عمل (JavaScript)، يمكنك أيضًا استخدامها مع مكونات الويب، يمكن أن تكون مفيدة أيضًا إذا كنت تريد إنشاء (UX) معقدًا لواجهة أمامية متجانسة، مثل الوظائف المستندة إلى الحالة، من ناحية أخرى، ربما لا تكون (CSS-in-JS) مناسبة لك إذا كنت مطورًا مبتدئًا، أو ترغب في إنشاء مواقع ويب بدون واجهة أمامية ديناميكية، أو تقدر البساطة وقابلية قراءة الكود، قد تجد بشكل معقول أن أدوات الانتقال الخاصة بك مثل (Sass أو PostCSS) مثالية لأهدافك وأنك لا تريد التقاط تقنية جديدة من أجل الابتكار فقط.
