React: मैं शैलियों को कैसे संक्षिप्त करूं?

मुझे लगता है कि आपने इस दस्तावेज़ को देखा है कि हम इनलाइन शैलियों को कैसे करते हैं: http://facebook.github.io/react/tips/inline-styles.html

हमारी शैली ब्राउज़र शैलियों के समान व्यवहार करती है। स्टाइल एनकैप्सुलेशन के लिए छाया डोम के रूप में हमारे पास अभी तक कोई समाधान नहीं है, लेकिन वेब कई वर्षों से छाया डोम के बिना अस्तित्व में है, इसलिए ब्राउज़र के मूल शैली नियमों का उपयोग करके वेबसाइटों को डिज़ाइन करना संभव है :)।

एक चीज जो आप कर सकते हैं, वह एक शैली रीसेट वर्ग को परिभाषित करता है, जो शैलियों को उनके डिफ़ॉल्ट पर रीसेट करता है, और फिर आप अधिक विशिष्ट चयनकर्ताओं के साथ चूक को ओवरराइड कर सकते हैं।

वैकल्पिक रूप से, आप एक बेस इनलाइन-स्टाइल ऑब्जेक्ट बना सकते हैं, जिसमें आपकी सभी डिफ़ॉल्ट शैलियाँ हों, उस ऑब्जेक्ट को हर जगह आयात करें, और जब आप एक विशिष्ट शैली लागू करना चाहते हैं, तो आप उस ऑब्जेक्ट की प्रतिलिपि बनाएँ और उन शैलियों को ओवरराइड करें जिन्हें आप Object.assign का उपयोग करके सेट करना चाहते हैं।

वह मेरा दो सेंट है। cc @spicyj

पुनश्च: चूंकि यह प्रतिक्रिया में एक बग के बजाय एक उपयोग प्रश्न का अधिक है, मैं आगे जाकर इस मुद्दे को बंद करने जा रहा हूं। इस धागे में बातचीत जारी रखने के लिए बेझिझक (समस्या को बंद करते हुए ज्यादातर इसे देव उद्देश्यों के लिए हमारे रडार से दूर ले जाता है)। इस तरह के सवालों के लिए एक आदर्श स्थान StackOverflow होगा।

मैं BEM-esque वर्ग के नाम का उपयोग करने की सिफारिश करता हूं जो विश्व स्तर पर अद्वितीय हैं, आमतौर पर घटक नाम द्वारा स्कोप किया जाता है:

var MyComponent = React.createClass({
  render: function() {
    return (
      <div className="MyComponent">
        <button className="MyComponent__button">Hi!</button>
      </div>
    );
  }
});

और फिर अपने सीएसएस में, एकल श्रेणी के नामों के पक्ष में, वंश चयनकर्ताओं का उपयोग करने से बचने की कोशिश करें। यह शैली के अलगाव और घटकों के अलगाव को बढ़ावा देता है - यह शैलियों को अलग किए बिना घटकों की रचना करना आसान बनाता है।

सूट एक और बढ़िया विकल्प है क्योंकि इसमें एक महान नाक टूलींग (rework) और एक अनुरूपता रक्षकों को एक स्वचालित सुरक्षा प्रदान करने के लिए है कि आपकी शैलियों में रक्तस्राव नहीं हो रहा है।

यह एक दिलचस्प समाधान की तरह दिखता है: https://github.com/Wildhoney/ReactShadow

एक अन्य संभावित समाधान है http://projects.formidablelabs.com/radium/

मैं जहां संभव हो, इनलाइन शैलियों का पक्ष लेता हूं, तब जब BEM जैसी जटिल चीज का उपयोग किया जाता है, जैसा कि @spicyj द्वारा अनुशंसित है। मुझे सूटकेस भी पसंद है, जो मेरे अनुभव में रिएक्ट के साथ अच्छी तरह से जोड़ते हैं।