5 طرق لتصميم التفاعل باستخدام CSS [2023]
هل تعلم أن أكثر من 97٪ من مواقع الويب تستخدم CSS للتصميم؟
تسمح أوراق الأنماط المتتالية (Cascading Style Sheets) أو CSS للمطورين بإنشاء صفحات ويب جيدة المظهر وقابلة للمسح الضوئي وقابلة للتقديم.
تحدد لغة CSS كيفية تقديم المستندات للمستخدم. المستند ، في هذه الحالة ، هو ملف مكتوب بلغة ترميزية مثل XML أو HTML.
ما هو التصميم في React؟
تُعد بساطة إنشاء تطبيق React وتشغيله وصيانته السبب الرئيسي وراء شعبيته. React هي مكتبة JavaScript وليست إطارًا ، وتقدم أكثر من مجرد وظائف مكتوبة مسبقًا ومقتطفات تعليمات برمجية.
يعد توافر المكونات القابلة لإعادة الاستخدام ومرونتها واستقرار الشفرة وسرعتها وأدائها من بين الأسباب التي تجعل React يحتل مرتبة عالية بين أطر عمل JavaScript والمكتبات.
التصميم في React هو عملية جعل مكونات مختلفة في تطبيق React جذابة بصريًا باستخدام CSS. ومع ذلك ، تجدر الإشارة إلى أن React تستخدم JSX (JavaScript و XML) بدلاً من HTML كلغة ترميزية. أحد الاختلافات الرئيسية هو أن HTML يستخدم class. لتسمية الفئات بينما يستخدم JSX .ClassName للإشارة إلى نفس التصنيف.
لماذا يجب أن تقوم بتصميم React باستخدام CSS؟
- اجعل تطبيقك مستجيبًا. يجب أن تكون تطبيقات الويب الحديثة متاحة على الشاشات الصغيرة والكبيرة. يتيح لك CSS تطبيق استعلامات الوسائط على تطبيق React الخاص بك وجعله يستجيب لأحجام الشاشات المختلفة.
- تسريع عملية التطوير. يمكنك استخدام نفس قاعدة CSS عبر العديد من مكونات تطبيق React الخاص بك.
- اجعل تطبيق React قابلاً للصيانة. يعد إجراء تغييرات في المظهر على مكونات / أجزاء معينة من تطبيقك أمرًا سهلاً باستخدام CSS.
- تحسين تجربة المستخدم. يسمح CSS بتنسيق سهل الاستخدام. التفاعل مع النص والأزرار في الأماكن المنطقية سهل التنقل والاستخدام.
هناك العديد من الأساليب التي يمكن للمطورين استخدامها لتصميم تطبيقات React الخاصة بهم. فيما يلي بعض من أكثرها شيوعًا ؛
اكتب الأنماط المضمنة
الأنماط المضمنة هي أسهل طريقة لتصميم تطبيق React ، حيث لا يحتاج المستخدمون إلى إنشاء ورقة أنماط خارجية. يتم تطبيق نمط CSS مباشرة على كود React.
من الجدير بالذكر أن الأنماط المضمنة لها أسبقية عالية على الأنماط الأخرى. وبالتالي ، إذا كانت لديك ورقة أنماط خارجية مع بعض التنسيق ، فسيتم تجاوزها بواسطة النمط المضمن.
هذا عرض لتصميم مضمّن في تطبيق React.
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>
<h2>Add a little style!</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
سيعرض العنصر المعروض h1 بخلفية زرقاء فاتحة.
إيجابيات التصميم المضمّن
- سريع. إنها الطريقة الأبسط ، حيث تقوم بإضافة نمط مباشرة إلى العلامة التي تريد تصميمها.
- لديه تفضيل كبير. تتجاوز الأنماط المضمنة أوراق الأنماط الخارجية. وبالتالي ، يمكنك استخدامه للتركيز على وظيفة معينة دون تغيير التطبيق بأكمله.
- رائع للنماذج الأولية. يمكنك استخدام الأنماط المضمنة لاختبار الوظائف قبل دمج التنسيق في ورقة أنماط خارجية.
سلبيات التصميم المضمّن
- يمكن أن تكون مملة. تصميم كل علامة مباشرة يستغرق وقتًا طويلاً.
- محدود. لا يمكنك استخدام ميزات CSS مثل المحددات والرسوم المتحركة ذات الأنماط المضمنة.
- العديد من الأنماط المضمنة تجعل كود JSX غير قابل للقراءة.
استيراد أوراق الأنماط الخارجية
يمكنك كتابة CSS في ملف خارجي واستيراده إلى تطبيق React. هذا الأسلوب مشابه لاستيراد ملف CSS في علامة
لمستند HTML.لتحقيق ذلك ، تحتاج إلى إنشاء ملف CSS في دليل التطبيق الخاص بك ، واستيراده إلى المكون الهدف وكتابة قواعد نمط لتطبيقك.
لتوضيح كيفية عمل أوراق أنماط CSS الخارجية ، يمكنك إنشاء ملف CSS وتسميته App.css. يمكنك بعد ذلك تصديرها على النحو التالي.
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
يستورد مقتطف الشفرة أعلاه ورقة أنماط خارجية إلى مكون App.js. يوجد ملف App.css في مجلد المكونات.
الايجابيات من أوراق أنماط CSS الخارجية
- قابلة لإعادة الاستخدام. يمكنك استخدام نفس قواعد / قواعد CSS عبر مكونات مختلفة في تطبيق React.
- يجعل الكود أكثر قابلية للتقديم. فهم الكود سهل عند استخدام أوراق الأنماط الخارجية.
- يمنح الوصول إلى ميزات CSS المتقدمة. يمكنك استخدام الفئات الزائفة والمحددات المتقدمة عند استخدام أوراق الأنماط الخارجية.
يخدع أوراق أنماط CSS الخارجية
- يتطلب اصطلاح تسمية موثوقًا به لضمان عدم تجاوز الأنماط.
استخدم وحدات CSS
يمكن أن تصبح تطبيقات React كبيرة جدًا. يتم بشكل افتراضي تحديد أسماء الرسوم المتحركة وأسماء الفئات في CSS بشكل عام. يمكن أن يكون هذا الإعداد مشكلة عند التعامل مع أوراق الأنماط الكبيرة ، حيث يمكن أن يتخطى أحد الأنماط الأخرى.
تحل وحدات CSS هذا التحدي من خلال تحديد نطاق أسماء الرسوم المتحركة والفئات محليًا. يضمن هذا الأسلوب أن أسماء الفئات متاحة فقط داخل الملف / المكون حيث تكون مطلوبة. يحصل كل اسم فئة على اسم برمجي فريد ، مما يؤدي إلى تجنب التعارضات.
لتنفيذ وحدات CSS النمطية ، أنشئ ملفًا بامتداد .module.css. إذا كنت تريد تسمية ورقة الأنماط الخاصة بك كنمط ، فسيكون اسم الملف هو style.module.css.
قم باستيراد الملف الذي تم إنشاؤه إلى مكون React الخاص بك ، وستكون جاهزًا للبدء.
قد يبدو ملف CSS الخاص بك مثل هذا ؛
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
يمكنك استيراد CSS Module على App.js الخاص بك على النحو التالي ؛
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello admingate.org reader</h1>
);
}
export default App;
مميزات استخدام وحدات CSS
- يتكامل بسهولة مع SCSS و CSS
- يتجنب التعارض في اسم الفئة
سلبيات استخدام وحدات CSS
- يمكن أن تكون الإشارة إلى أسماء الفئات باستخدام وحدات CSS مربكة للمبتدئين.
استخدم مكوّنات متناسقة
تسمح المكونات المصممة للمطورين بإنشاء مكونات باستخدام CSS في كود JavaScript. يعمل المكوِّن المصمم كمكوِّن React يأتي مع الأنماط. تقدم المكونات النمطية أسلوبًا ديناميكيًا وأسماء فئات فريدة.
لبدء استخدام Styled Components ، يمكنك تثبيت الحزمة على المجلد الجذر الخاص بك باستخدام هذا الأمر ؛
npm install styled-components
الخطوة التالية هي استيراد Styled Components إلى تطبيق React الخاص بك
ما يلي هو مقتطف رمز من App.js يستخدم Styled Components ؛
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 80%;
height: 120px;
background-color: lightblue;
display: block;
`;
return <Wrapper />;
}
export default App;
سيكون للتطبيق الذي تم تقديمه الأنماط المذكورة أعلاه المستوردة من Styled Components.
إيجابيات المكونات الأنماط
- يمكن التنبؤ به. تتداخل الأنماط في أسلوب التصميم هذا في المكونات الفردية.
- لا حاجة للتركيز على اصطلاحات تسمية فصولك الدراسية. فقط اكتب الأنماط الخاصة بك ، وستتولى الحزمة الباقي.
- يمكنك تصدير “مكوّنات الأنماط” كدعامات. تقوم المكونات المصممة بتحويل CSS العادي إلى مكونات React. يمكنك بالتالي إعادة استخدام هذا الرمز ، وتوسيع الأنماط من خلال الدعائم ، والتصدير.
يخدع من المكونات الأنماط
- يجب عليك تثبيت مكتبة طرف ثالث للبدء.
أوراق أنماط رائعة نحويًا (SASS / SCSS)
تأتي SASS بأدوات وميزات أكثر قوة مفقودة في CSS العادي. يمكنك كتابة أنماط في نمطين مختلفين تسترشد بهذه الامتدادات ؛ .scss و. sass.
يشبه بناء جملة SASS تلك الخاصة بـ CSS المعتاد. ومع ذلك ، لا تحتاج إلى قوسي الفتح والإغلاق عند كتابة قواعد النمط في SASS.
سيظهر مقتطف بسيط من SASS على النحو التالي ؛
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
لبدء استخدام SASS في تطبيق React الخاص بك ، تحتاج أولاً إلى ترجمة SASS إلى CSS عادي. بعد إعداد التطبيق الخاص بك من خلال الأمر Create React App ، يمكنك تثبيت node-sass للاهتمام بالتجميع.
npm install node-sass
يمكنك بعد ذلك إنشاء ملفاتك ومنحها إما امتدادات .scss أو .sass. يمكنك بعد ذلك استيراد ملفاتك بالطريقة العادية. على سبيل المثال؛
import "./Components/App.sass";
إيجابيات SASS / SCSS
- يأتي مع العديد من الميزات الديناميكية مثل المزيج والتداخل والتمديد.
- ليس لديك الكثير من النماذج المعيارية لكتابة كود CSS عند استخدام SASS / SCSS
سلبيات SASS / SCSS
- الأنماط عالمية ، وبالتالي قد تصادفك مشكلات مهيمنة.
ما هو أفضل أسلوب تصفيف؟
نظرًا لأننا ناقشنا خمس طرق ، فأنت تريد أن تعرف ما هو الأفضل. من الصعب تسليط الضوء على الفائز الصريح في هذه المناقشة. ومع ذلك ، ستساعدك هذه الاعتبارات على اتخاذ قرار مستنير:
- مقاييس الأداء
- سواء كنت بحاجة إلى نظام تصميم
- سهولة تحسين التعليمات البرمجية الخاصة بك
يكون التصميم المضمن مناسبًا عندما يكون لديك تطبيق بسيط به بضعة أسطر من التعليمات البرمجية. ومع ذلك ، كل الآخرين ؛ الخارجية ، SASS ، Styled Components و CSS Modules ، مناسبة للتطبيقات الكبيرة.
ما هي أفضل الممارسات للحفاظ على CSS في تطبيق رد فعل كبير؟
- تجنب التصميم المضمن. قد تكون كتابة أنماط CSS مضمنة لكل علامة في تطبيق React كبير أمرًا مرهقًا. بدلاً من ذلك ، استخدم ورقة أنماط خارجية تناسب احتياجاتك.
- Lint التعليمات البرمجية الخاصة بك. ستبرز Linters مثل Stylelint أخطاء التصميم في التعليمات البرمجية الخاصة بك حتى تتمكن من إصلاحها مبكرًا.
- قم بعمل مراجعات منتظمة للكود. تبدو كتابة CSS أمرًا ممتعًا ، لكن المراجعات المنتظمة للكود تجعل من السهل التعرف على الأخطاء مبكرًا.
- أتمتة الاختبارات على ملفات CSS الخاصة بك. Enzyme and Jest هما من الأدوات الرائعة التي يمكنك استخدامها لأتمتة الاختبارات على كود CSS الخاص بك.
- احتفظ بالرمز الخاص بك جافًا. عند التعامل مع الأنماط شائعة الاستخدام مثل الألوان والهوامش ، استخدم متغيرات وفئات المرافق كما هو الحال مع مبدأ لا تكرر نفسك (DRY).
- استخدم اصطلاحات التسمية مثل Block Element Modifier. مثل هذا النهج يجعل من السهل كتابة فئات CSS يسهل فهمها وإعادة استخدامها.
خاتمة
فيما يلي بعض الطرق التي يمكنك استخدامها لتصميم React. يعتمد اختيار أسلوب التصميم على احتياجاتك ومهاراتك وذوقك. يمكنك أيضًا الجمع بين العديد من أساليب التصميم ، مثل أوراق الأنماط المضمنة والخارجية ، في تطبيق React الخاص بك.
يمكنك أيضًا استكشاف بعض أفضل أطر عمل ومكتبات CSS لمطوري الواجهة الأمامية.
