أصبحت مكتبات CSS-in-JS ، مثل المكونات المصممة ، أكثر شيوعًا في السنوات الأخيرة. تقوم بتغليف CSS وصولاً إلى مستوى المكون وتسمح لك باستخدام JavaScript لتحديد الأنماط القابلة لإعادة الاستخدام.
باستخدام المكوّنات المصمّمة ، يمكنك الحفاظ على البنية القائمة على المكوّنات التي تعززها React بالفعل. لكن المكتبة بها بعض الجوانب السلبية أيضًا.
كيف تعمل المكونات المصممة
ال مكونات على غرار تتيح لك مكتبة CSS-in-JS كتابة CSS داخل ملفات المكونات الخاصة بك. بناء الجملة الخاص به هو نفسه CSS ، لذلك من السهل جدًا التقاطه. إنها حل وسط مثالي لمطوري JavaScript الذين يميلون إلى الابتعاد عن CSS الخالص.
لمعرفة كيفية عملها ، ضع في اعتبارك مكون العنوان التالي الذي يعرض عنصر h1.
مقدار ثابت العنوان = style.h1`
حجم الخط: 1.5em;
محاذاة النص: مركز ؛
لون احمر؛
`;
يمكنك استخدام هذا المكون مثل أي مكون React آخر.
مقدار ثابت الصفحة الرئيسية = () => {
إرجاع (
<عنوان>عنوان مكون ذو نمط</Title>
)
}
إنها أيضًا قوية جدًا لأنها تسهل العمل مع الدعائم والحالة.
على سبيل المثال ، يعتمد لون وخلفية هذا المكون على الدعائم.
يستورد على غرار من "مكونات على غرار" ؛مقدار ثابت زر = زر على غرار`
حشوة: 0.8rem 1.6rem;
لون الخلفية: $ {(الدعائم) => (الدعائم الأولية؟ "ليلكي": "أبيض")};
الحدود: 1بكسل صلبة #00000;
اللون: $ {(الدعائم) => (الدعائم الأولية؟ "أبيض": "ليلكي")};
`;
يصدّرإفتراضيوظيفةمسكن() {
إرجاع <الزر الأساسي>الأولية</Button>
}
باستخدام المكونات المصممة ، لا تحتاج إلى تمرير الدعائم يدويًا إلى CSS. إنه متاح تلقائيًا ، مما يبسط أنماط الكتابة التي تعتمد على البيانات من المكون.
إيجابيات استخدام المكونات الأنماط
فيما يلي بعض مزايا استخدام مكتبة المكونات المصممة.
يحل مشاكل خصوصية CSS
تعمل المكونات المصممة على التخلص من مشكلات الخصوصية لأنها تغلف CSS داخل أحد المكونات. هذا يعني أنه لا داعي للقلق بشأن تعارض أسماء الفئات أو تحول واجهة المستخدم الخاصة بك إلى فوضى بسبب تعارض أسماء الفئات.
يسمح لك بكتابة مكونات CSS الداخلية
كما يتضح من مثال مكون الزر ، تسمح لك المكونات المصممة بدمج CSS و JS في نفس الملف. لذلك ، لا تحتاج إلى إنشاء ملف CSS منفصل أو الاستمرار في التبديل من ملف إلى ملف.
هذه ميزة كبيرة عند إنشاء مجموعات واجهة المستخدم لأنك تقوم بتخزين جميع وظائف المكونات في ملف واحد.
بخلاف ذلك ، كتابة CSS داخل المكونات. يجعل من السهل مشاركة الدعائم والحالات ذات الأنماط.
يسمح بفحص النوع
باستخدام المكونات المصممة ، يمكنك التحقق من الدعائم والقيم المستخدمة في الأنماط الخاصة بك. على سبيل المثال ، يمكنك إعادة كتابة مكون الزر أعلاه باستخدام TypeScript.
واجهه المستخدمالدعائم{
الأولية: قيمة منطقية
}
زر const = زر على غرار زر<الدعائم>`
حشوة: 0.8rem 1.6rem;
لون الخلفية: $ {(الدعائم) => (الدعائم الأولية؟ "ليلكي": "أبيض")};
الحدود: 1بكسل صلبة #00000;
اللون: $ {(الدعائم) => (الدعائم الأولية؟ "أبيض": "ليلكي")};
`;
استخدام TypeScript في المكون يعني التحقق من أخطاء الكتابة أثناء كتابة التعليمات البرمجية وتقليل وقت التصحيح.
يدعم Theming Out of the Box
إضافة مظهر داكن أو أي سمة أخرى لتطبيقك يمكن أن تكون صعبة وتستغرق وقتًا طويلاً. ومع ذلك ، فإن المكونات ذات الأنماط تبسط العملية. يمكنك إضافة سمات إلى تطبيقك عن طريق تصدير ملف
مقدار ثابت زر = Styled.main`
لون الخلفية: $ {props => props.theme.light.background} ؛
اللون: $ {props => props.theme.light.fontColor} ،
`
<ThemeProvider theme = {theme}>
<زر>
زر الضوء
</Button>
</ThemeProvider>
يمرر مكون ThemeProvider السمات إلى جميع المكونات المصممة التي يلتف عليها. يمكن لهذه المكونات بعد ذلك استخدام قيم النسق في أنماطها. في هذا المثال ، يستخدم الزر قيم النسق لألوان الخلفية والخط.
سلبيات استخدام المكونات المصممة
في حين أن استخدام مكتبة المكونات المصممة له فوائد عديدة ، إلا أن له عيوبًا أيضًا.
إنه ليس إطار عمل مستقل
كتابة CSS في JS تعني أن فصل الاثنين في المستقبل سيكون صعبًا ، وهو أمر مروع لقابلية الصيانة. على سبيل المثال ، إذا قررت تبديل ملف إطار عمل جافا سكريبت، سوف تحتاج إلى إعادة كتابة معظم التعليمات البرمجية الخاصة بك.
هذا يستغرق وقتا طويلا ومكلفا. استخدام وحدات CSS أو مكتبة مستقلة عن إطار العمل مثل العاطفة هي أكثر إثباتًا للمستقبل.
قد يكون من الصعب قراءتها
قد يكون التفريق بين المكونات المصممة ومكونات React أمرًا صعبًا ، خاصةً خارج نظام التصميم الذري. ضع في اعتبارك هذا المثال:
<رئيسي>
<التنقل>
<قائمة الاغراض>
<LinkText>تبني حيوان أليف</LinkText>
</ListItem>
<قائمة الاغراض>
<LinkText>يتبرع</LinkText>
</ListItem>
</Nav>
<رأس>تبنى ، دون'ر متجر!</Header>
<SecondaryBtn btnText ="يتبرع" />
</Main>
الطريقة الوحيدة لمعرفة المكون الذي يحتوي على منطق الأعمال هو التحقق مما إذا كان يحتوي على خاصيات. علاوة على ذلك ، على الرغم من أن أسماء المكونات في هذا المثال وصفية ، إلا أنه لا يزال من الصعب تصورها.
على سبيل المثال ، قد يكون مكون الرأس عنوانًا ، ولكن ما لم تتحقق من الأنماط ، فقد لا تعرف أبدًا ما إذا كان h1 أو h2 أو h3.
يقوم بعض المطورين بحل هذه المشكلة عن طريق استخدام المكون المصمم فقط كغلاف واستخدام علامات HTML الدلالية للعناصر الموجودة بداخله.
في هذا المثال ، يمكن لمكون الرأس استخدام علامة h1.
<h1>تبنى ، دون'ر متجر!</h1>
يمكنك المضي قدمًا في هذا الأمر من خلال تحديد المكونات المصممة في ملف آخر (على سبيل المثال ، Styled.js) ، والتي يمكنك استيرادها لاحقًا إلى مكون React.
يستورد * كما أنيق من "./styled"
// استخدام style.components
<على غرار. رئيسي>
// الشفرة
</styled.Main>
يمنحك القيام بذلك رؤية واضحة للمكونات المصممة ومكونات React.
يتم تجميع المكونات المصممة في وقت التشغيل
بالنسبة للتطبيقات التي تستخدم مكونات ذات نمط ، يقوم المتصفح بتنزيل CSS ويوزعها باستخدام JavaScript قبل إدخالها في الصفحة. يتسبب هذا في حدوث مشكلات في الأداء لأنه يجب على المستخدم تنزيل الكثير من JavaScript في التحميل الأولي.
Static CSS أسرع بكثير. لا يلزم معالجته قبل أن يستخدمه المتصفح لتصميم الصفحات. ومع ذلك ، تتحسن مكتبة المكونات المصممة مع كل إصدار. إذا كنت تستطيع تحمل بعض الأداء المنخفض ، فاستمر في استخدامه.
متى تستخدم المكونات ذات الأنماط
يستمتع بعض المطورين بكتابة ملفات CSS في ملفات JS ، بينما يفضل البعض الآخر الحصول على ملفات CSS منفصلة. يجب أن تعتمد الطريقة التي تختارها لكتابة CSS في النهاية على المشروع نفسه وما تحبه أنت أو فريقك. تعد المكونات ذات الأنماط اختيارًا جيدًا لبناء مكتبة واجهة المستخدم حيث يمكن أن يكون كل شيء في ملف واحد ويمكن تصديره وإعادة استخدامه بسهولة.
إذا كنت تفضل كتابة CSS خالص ، فاستخدم وحدات CSS النمطية. يمكن أن يكون لديك ملفات CSS منفصلة ، وتقوم بتحديد أنماط النطاقات محليًا بشكل افتراضي. بغض النظر عن اختيارك ، فإن امتلاك معرفة قوية بـ CSS يعد أمرًا ضروريًا.