تعلم EmotionJS أثناء تناول قهوة الصباح - إنها بهذه السهولة.

EmotionJS هي مكتبة CSS-in-JavaScript ذات إمكانيات مذهلة. دعونا نرى كيف تطور عالم CSS إلى هذا الحل ، ثم نتعمق في ما يمكنك فعله به اليوم.

حروب CSS (ملخص)

في العامين الماضيين ، شهدنا انتقالًا إلى أنواع مختلفة من أساليب التصميم ، وكلها تعتمد على CSS. هذا هو جوهر الترتيب الزمني:

عادي CSS القديم

هذه هي الطريقة الكلاسيكية والبسيطة لتطبيق CSS. نشير إلى ملف CSS في index.html الخاص بنا ويتم تطبيقه على ملفات HTML الخاصة بنا عن طريق القواعد الكلاسيكية لـ CSS.

يواجه هذا النهج مشاكل عند تطبيقه على نطاق واسع ، حيث يعتمد CSS على الخصوصية التي يجب التعامل معها برفق إذا أردنا منع تصادمات CSS.

من الصعب أيضًا تصحيح الأخطاء عند الفحص في المتصفح. من الصعب فهم أي مجموعة من خصائص CSS انتهت بالتأثير على النمط الذي نراه في علامة HTML.

معالجات CSS الأولية

كان لـ CSS القديم البسيط بعض القيود ، مما أدى إلى ولادة بعض امتدادات CSS مثل Less و Sass. تسمح لنا امتدادات اللغة هذه بالكتابة بلغة ذات قدرات أقوى. تتضمن الأمثلة تداخل محدد CSS والوظائف والمزيد. تقوم أداة البناء الخاصة بنا بتجميع هذه الملفات في ملفات CSS بسيطة ويتم تطبيقها بطريقة عادية.

وحدات CSS

تم تقديم هذا النهج بمجرد أن بدأ تطوير الويب في التعامل مع صفحات الويب كأشجار من المكونات. تتعلق وحدات CSS بتصميم مكون بشكل مستقل ، ولا تؤثر على أجزاء أخرى من واجهة المستخدم ولا تتأثر بها.

بعد إدخال وحدات CSS في مشروعنا ، يشير كل مكون إلى ملف CSS باستخدام CSS عادي أو معالج مسبقًا. أثناء عملية الإنشاء ، يأخذ نظام البناء الخاص بنا (مثل حزمة الويب) كل فئة CSS ، ويبدأها باسم المكون ويلاحقها بمعرف فريد بحيث تكون الفئة فريدة.

هذا النهج رائع لأنه من السهل جدًا تحقيق عزل CSS. أيضًا ، من السهل فهم قواعد CSS التي تم تطبيقها على عناصر HTML الخاصة بنا ومكان نشأتها. لقد كنت من أشد المدافعين عن هذا النهج - حتى تم إصدار EmotionJS.

CSS-in-JS

يتحدى هذا النهج ممارسة عزل CSS في ملفات CSS. يتيح لنا تحديد قواعد CSS الخاصة بنا داخل كود JavaScript الخاص بنا ككائنات JS.

بعض الأطر مثل Reactلديك دعم مدمج لهذه الطريقة. ظهرت بعض المكتبات من الحاجة إلى توفير حل أكثر عزلة وقابلية للتوسع. أهم المكتبات هي Styled Components و EmotionJS.

دعونا نوضح هذه التفاصيل.

المكونات المصممة مقابل EmotionJS!

وصلت المكونات الأنماط أولاً ، ومن المسلم به أن EmotionJS تأثرت بشدة بها.

المكونات المصممة هي مكونات React بسيطة وصغيرة. يعرّفون علامة HTML وأنماطها كدالة لعناصر المكون.

يؤدي هذا إلى عزل دلالات HTML و CSS عن مكونات React الأكثر فاعلية. وهذا بدوره يوفر تجربة تطوير أكثر قابلية للقراءة والصيانة.

مثال على المكونات المصممة:

ما نراه هنا هو زر HTML مع بعض دعائم CSS.

و colorو backgroundيتم تحديد خصائص CSS بوصفها وظيفة من primaryدعامة التي يتم تمريرها (أو لا) للعنصر.

لاحظ كيف أن JSX بسيط جدًا ودلالي ، ويتم عزل جزء CSS و HTML في المكون المصمم.

الآن دعونا نلقي نظرة على EmotionJS.

EmotionJSيأخذ قوة المكونات المصممة ويضيف بعض الوظائف المفيدة (وأيضًا الشعار الأكثر روعة على الإطلاق).

دعنا نظهر الأشياء التي اعتقدت أنها أكثر إثارة للإعجاب مع EmotionJS.

الشيء الوحيد الذي كرهته حتى الآن هو الحفاظ على استعلامات وسائط CSS.

توجد قواعد CSS لكل نقطة توقف في مناطق مختلفة من ملفات CSS. كان من الصعب رؤية الخصائص المتداخلة والتعامل معها.

في EmotionJS ، يمكننا إنشاء عرض ثابت لنقاط التوقف بمساعدة مكتبة Facepaint.

يمكننا بعد ذلك الإشارة إلى هذا الثابت ، مع الإعلان عن قيم خاصية CSS لكل نقطة توقف في مكان واحد.

دعنا نقسم هذا المثال:

  • السطر 4-9: نحدد عرض نقطة التوقف الخاصة بنا ، في مكان واحد في تطبيقنا
  • السطر 13-23: نحدد مكون الزر وهو علامة div مع بعض خصائص CSS. لها widthو heightيتم تحديد القيم باعتبارها مجموعة من القيم، واحدة لكل نقطة. لاحظ كيف أننا لا نحتاج إلى تحديد pxالوحدات. يتم إضافتهم تلقائيًا. لاحظ أيضًا أن background-colorالخاصية تعتمد على الخاصية primaryالمقدمة إلى مكون Button. هذا مشابه لمثال المكونات ذات الأنماط.
  • السطر 26-33: في مكون React الخاص بنا ، نشير إلى زر EmotionJS الخاص بنا ونستخدمه كعلامة JSX

ميزات أخرى لتطبيق EmotionJS

لدى EmotionJS بعض الطرق الأخرى لتحقيق بعض هذه القدرات:

  • خاصية CSS - يمكننا تزويد مكونات React الخاصة بنا بخاصية CSS وهي كائن JavaScript أو سلسلة تحدد خصائص CSS الخاصة بنا.
  • يمكن أيضًا استهداف استعلامات الوسائط باستخدام نهج عناصر CSS

الخلاصة: الجيد والسيئ والعاطفي

الايجابيات:

  • من السهل دمج واستبدال حلول CSS الأخرى.
  • من السهل تحديد وإزالة الكود الميت مقارنة بالحلول الأخرى.
  • من الأسهل التعامل مع استعلامات الوسائط ، حيث يتم تجميع القيم معًا.
  • تصبح مكونات React أكثر دلالات حيث يتم عزل HTML و CSS.

سلبيات:

  • باستخدام وحدات CSS ، من السهل أن تفهم بالضبط مصدر قاعدة CSS عند الفحص في المتصفح. هذا لأن أسماء الفئات يتم إنشاؤها باستخدام بادئات اسم مكون React. مع EmotionJS ، هذا لا يحدث.
  • إذا حددنا خاصية CSS لاستعلام وسائط واحد ، فسنحتاج إلى تعريفها للباقي أيضًا ، حيث نقدم مجموعة من القيم. في كثير من الحالات ، نريد فقط معالجة استعلام أو استعلامين عن الوسائط وترك الآخرين كقيمة افتراضية.

الحكم

EmotionJS هي الخطوة التالية في الاتجاه الصحيح ، حيث تتعامل مع مخاطر CSS. إنه يوفر بيئة معزولة وقابلة للصيانة تحافظ على مكوناتنا الرئيسية منطقية ودلالية.

لقد استغرقت حرفيًا عشر دقائق لأتعلمها ودمجها وهو تحسن كبير في هذا المجال.

لا تنس أن تصفق إذا أعجبك هذا ، وتابعني على Twitter: //twitter.com/shahar_taite