توفر مكتبات CSS-in-JS نهجًا جديدًا لكتابة CSS وتهدف إلى معالجة قيود CSS مثل نقص الوظائف الديناميكية وتحديد النطاق وقابلية النقل.
ما هي تقنية نمط CSS-in-JS؟
CSS-in-JS هي في الأساس مكتبة JavaScript تجمع كل مكون JavaScript مع جميع قواعد CSS والتبعيات. ونتيجة لذلك ، يمكن تشغيل المكونات بشكل مستقل دون الاعتماد على أي ملفات CSS خارجية. يمكنك كتابة ملفاتك في ملفات js.
ما هي مزايا 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) مثالية لأهدافك ، وقد لا ترغب في شراء تقنية جديدة من أجل الابتكار فقط.
المصدر: وكالات
