[css] أفضل ممارسات أسلوب مضمنة React.js



5 Answers

تتوقع سمة النمط في React أن تكون القيمة كائنًا ، أي زوج القيمة الأساسية.

سيحتوي style = {} على كائن آخر بداخله مثل {float:'right'} لتشغيله.

<span style={{float:'right'}}>{'Download Audit'}</span>

أتمنى هذا يصلح المشكلة

Question

أنا على دراية بأنه يمكنك تحديد أنماط داخل فئات React ، مثل هذا:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

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

أو يجب أن أتجنب الأنماط المضمنة تمامًا؟

يبدو من الغريب والفوضى أن تفعل قليلا على حد سواء - سوف تحتاج إلى التحقق من مكانين عند التغيير والتبديل في التصميم.




المشكلة مع الأنماط المضمنة هي أن سياسات أمان المحتوى (CSP) أصبحت أكثر شيوعًا ، والتي لا تسمح بذلك. لذلك ، أوصي بتجنب الأنماط المضمنة تمامًا.

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

الغرض من معظم هذه القيود هو إيقاف هجمات XSS (البرمجة النصية للمواقع المشتركة). XSS هو المكان الذي يظهر فيه أحد المهاجمين طريقة لتضمين جافا سكريبت خاص به على صفحتك (على سبيل المثال ، إذا قمت بعمل اسم المستخدم الخاص بي bob<SCRIPT>alert("hello")</SCRIPT> ثم قم بنشر تعليق ، وقمت بزيارة الصفحة ، لا ينبغي أن تظهر التنبيه). يجب على المطورين رفض إمكانية قيام المستخدم بإضافة محتوى مثل هذا إلى الموقع ، ولكن فقط في حالة ارتكابهم خطأ ، عندئذ يقوم CSP بحظر الصفحة من التحميل إذا وجد أي script> علامات.

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

بحيث يكون كل XSS ، ولكن ماذا لو لم يتمكن المهاجم من تضمين علامات <script> ولكن يمكن تضمين علامات <style> أو تضمين style= معلمة على علامة؟ ثم قد يتمكن من تغيير مظهر الموقع بطريقة يتم خداعك بها للنقر على الزر الخطأ أو مشكلة أخرى. هذا هو أقل بكثير من القلق ، ولكن لا يزال هناك شيء لتجنب ، و CSP يفعل ذلك بالنسبة لك.

مورد جيد لاختبار موقع ل CSP هو https://securityheaders.io/

يمكنك قراءة المزيد عن CSP على: http://www.html5rocks.com/en/tutorials/security/content-security-policy/




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

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




يمكنك استخدام StrCSS كذلك ، فإنه ينشئ أسماء الفئات المعزولة وأكثر من ذلك بكثير! قد يبدو رمز المثال. يمكنك (اختياري) تثبيت ملحق VSCode من Visual Studio Marketplace لتسليط الضوء على بناء الجملة!

المصدر: https://github.com/jeffreylanters/strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}



لدي عادة ملف scss مرتبط بكل مكون React. لكني لا أرى سبباً يجعلك لا تغلف العنصر بمنطقه وتنظر فيه. أعني ، لديك شيء مماثل مع مكونات الويب.




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

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

وفي الملف "custom-component.css" ، سيبدأ كل إدخال بعلامة المكون المخصص:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

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




Related