تصميم أفضل الممارسات باستخدام التفاعل

الصورة من قبل بانكاج باتل على Unsplash

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

كيف يمكن لأحد "نمط" صفحة الويب الخاصة بك باستخدام رد الفعل؟

React ، من تلقاء نفسها وبدون أي أداة أخرى ، تدعم طريقتين لعناصر النمط: prop style ، وعلامة النمط ، وأوراق أنماط CSS. يأخذ prop style كائن JS من خصائص CSS وقيمه ويقوم في النهاية بترجمة ذلك إلى أنماط مضمنة لعنصر ، مثل هذا:

// JSX
   نص احمر   // DOM
   نص احمر

نظرًا لأنها مجرد أنماط مضمّنة ، لا يزال تحصل على أعلى درجة من الخصوصية ولكنك مقيد بما يمكنك الوصول إليه.

تعمل علامة النمط وأوراق أنماط CSS تمامًا مثل العمل مع علامات HTML الخالصة. الفرق الأكبر هو أنه يجب عليك استخدام theclassName prop بدلاً من الفئة. يأخذ كل من id prop و className prop سلسلة أو تعبير يتم تقييمه إلى سلسلة ، مثل هذا:

// JSX
// DOM

يمكن أن يصبح الحفاظ على CSS على نطاق واسع أمرًا صعبًا للغاية ، لذا فقد بنى مجتمع React أدوات تعمل على تحسين تجربة المطورين في الحفاظ على CSS على نطاق واسع. هناك العديد من التي تم إنشاؤها ، ولكن الأكبر هما على الأرجح وحدات CSS و CSS-in-JS (وبشكل أكثر تحديداً المكونات / العاطفة).

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

استيراد css من './index.css' ؛
// DOM

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

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

Styled-Component و Emotion هما مكتبتان شائعتان للغاية تحققان نفس الهدف الذي تحققه وحدات CSS ، لكنهما يعملان بطريقة مختلفة. تستفيد كلتا المكتبات من بناء الجملة الحرفية للقوالب ذات العلامات ، المقدمة في ES6. ببساطة ، تمثل حرفية القوالب المعلمة وظائف يتم استدعاؤها باستخدام سلاسل حرفية للقالب. تقوم الدالة بتوزيع القوالب الحرفية ويمكنها التصرف وفقًا لذلك.

كيفية عمل هذه المكتبات هي كتابة CSS كسلسلة قالب ، تقوم الدالة بتوزيع سلسلة القالب ، وإدخالها في علامة نمط للمستند ، وإرجاع مكون به الفئة المناسبة التي تم حقنها بالفعل. فيما يلي مثال عن كيفية عمله (المثال يستخدم مكونات نمطية ، ولكن العاطفة تستخدم API متطابقة تقريبًا):

استيراد نصب من "المكونات على غرار" ؛
const تخطيط = styled.div`
   عرض: الشبكة.
`.
// DOM

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

مع كل هذه الأساليب ، ما هي أفضل طريقة للأناقة؟ الكثير غير موضوعي ويعتمد حقًا على تفضيل فرق المطور أو المطور. ومع ذلك ، هناك بعض أفضل الممارسات التي ظهرت.

الأنماط المضمنة لم تعد "سيئة"

أحد الأشياء الأولى التي تعلمتها عند تعلم CSS كانت أن الأساليب المضمّنة كانت سيئة ، ولم تكن جيدة ، وينبغي تجنبها بأي ثمن. لكن من المهم أن نفهم أسباب اعتبارهم "سيئين".

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

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

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

هذه الطريقة ليست مثالية. لا تسمح أنماط Inlines بالوصول إلى محددات الزائفة أو استعلامات الوسائط ، على سبيل المثال. لكن لم يعد استخدام الأنماط المضمّنة أمرًا سيئًا ويجب أن يكون بالتأكيد جزءًا من صندوق أدوات مطور البرامج.

المكونات لا يجب أن تضع نفسها

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

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

كيف يمكننا الالتفاف حول هذا؟ هناك 3 طرق يمكننا القيام بذلك. إحدى الطرق هي فضح الدعائم className و / أو النمط للسماح بحقن الأنماط ، مثل هذا:

const القطعة = ({className = ''، ... props}) =>
         
//أو
const Widget = ({style = {}، ... props}) =>
        

الجانب السلبي المحتمل لذلك هو أنه يفتح أنماطك الأخرى ليتم الكتابة فوقها ، وهو أمر غير مرغوب فيه غالبًا ، لا سيما عند العمل ضمن نظام التصميم. للحماية من ذلك ، يمكنك وضع أنماطك ، التي لا تريد الكتابة فوقها ، أخيرًا. يمكنك القيام بذلك مثل هذا:

const القطعة = ({className = ''، ... props}) =>
         
//أو
const Widget = ({style = {}، ... props}) =>
        

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

تتمثل الطريقة الثالثة في تكوين المكون الخاص بك في "غلافات" تحتوي على هذا الموضع المدمج ، مثل هذا:

const تخطيط = () => (
   
     
        <القطعة />
     
   

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

يجب استخلاص الأنماط

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

const SideBar = ({title}) => (
   
     

        {عنوان}            
        <القطعة />           ):

وأكثر مثل هذا:

const SideBar = ({title}) => (
   <حاويات>
     <عنوان>
        {عنوان}
     
     
        <القطعة />
     
   
):

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

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