React: Wie kapsle ich Stile?

Ich gehe davon aus, dass Sie dieses Dokument über die Vorgehensweise bei Inline-Stilen gesehen haben: http://facebook.github.io/react/tips/inline-styles.html

Unsere Stile verhalten sich genauso wie Browser-Stile. Wir haben noch keine so saubere Lösung wie das Schatten-DOM für die Stilkapselung, aber das Web existiert seit vielen Jahren ohne Schatten-DOM, so dass es sicherlich möglich ist, Websites mit den nativen Stilregeln des Browsers zu entwerfen :).

Sie können eine Klasse zum Zurücksetzen von Stilen definieren, die die Stile auf ihre Standardeinstellungen zurücksetzt. Anschließend können Sie die Standardeinstellungen mit spezifischeren Selektoren überschreiben.

Alternativ können Sie ein Basisobjekt im Inline-Stil erstellen, das alle Ihre Standardstile enthält, dieses Objekt überall importieren. Wenn Sie einen bestimmten Stil anwenden möchten, kopieren Sie dieses Objekt und überschreiben die Stile, die Sie festlegen möchten, mit Object.assign . Wenn Sie wirklich ausgefallen sein möchten, können Ihre Komponenten den Stil automatisch zusammenführen (mit dem von Ihnen erstellten Stil-Reset-Objekt), sodass Ihre Webdevs die Komponenten nur verwenden können, ohne den Code zum Zurücksetzen des Stils zu sehen.

Das sind meine zwei Cent. cc @spicyj

PS: Da dies eher eine Verwendungsfrage als ein Fehler in React ist, werde ich das Problem schließen. Fühlen Sie sich frei, die Konversation in diesem Thread fortzusetzen (das Schließen des Problems nimmt es meistens nur für Entwicklungszwecke von unserem Radar). Ein idealer Ort für Fragen wie diese wäre StackOverflow.

Ich empfehle in der Regel die Verwendung von BEM-ähnlichen Klassennamen, die global eindeutig sind und normalerweise nach Komponentennamen geordnet sind:

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

Versuchen Sie dann in Ihrem CSS, die Verwendung von Nachkommen-Selektoren zugunsten einzelner Klassennamen zu vermeiden. Dies fördert tendenziell die Stilisolation und die Trennung von Komponenten - es erleichtert das Zusammenstellen von Komponenten, ohne dass die Stile auseinanderfallen.

Der Anzug ist eine weitere großartige Option, da er über hervorragende Nasenwerkzeuge (Nacharbeit) und Konformitätsprüfer verfügt, um einen automatisierten Schutz zu bieten, dass Ihre Stile nicht bluten.

Dies scheint eine interessante Lösung zu sein: https://github.com/Wildhoney/ReactShadow

Eine weitere mögliche Lösung ist http://projects.formidablelabs.com/radium/

Wenn möglich, bevorzuge ich Inline-Stile. Wenn es zu komplex wird, verwende ich etwas wie BEM, wie von @spicyj empfohlen. Ich mag auch SuitCSS, das meiner Erfahrung nach gut zu React passt.