Best Practices für Inline-Stile von React.js

Das style-Attribut in React erwartet, dass der Wert ein Objekt ist, dh das Schlüsselwertpaar.

style = {} enthält ein anderes Objekt wie {float:'right'}, damit es funktioniert.

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

Hoffe, das löst das Problem

Ich verwende Inline-Styles in meinen React-Komponenten. Ich finde es viel klarer, Stile innerhalb von Komponenten zusammenzufassen, da immer klar ist, welche Stile die Komponente hat und welche nicht. Wenn Sie außerdem die volle Leistungsfähigkeit von Javascript zur Hand haben, werden komplexere Styling-Anforderungen wirklich vereinfacht.

Ich war zunächst nicht überzeugt, aber nachdem ich mich einige Monate damit beschäftigt hatte, bin ich vollständig konvertiert und bin dabei, alle meine CSS in Inline- oder andere JS-gesteuerte CSS-Methoden umzuwandeln.

Diese Präsentation von Facebook-Mitarbeiter und -Mitarbeiter von React "vjeux" ist auch sehr hilfreich - https://speakerdeck.com/vjeux/react-css-in-js

Der Hauptzweck des style-Attributs ist für dynamische, zustandsbasierte Stile. Beispielsweise könnten Sie einen Breitenstil in einer Fortschrittsleiste haben, der auf einem bestimmten Status basiert, oder auf der Position oder Sichtbarkeit auf einem anderen.

Styles in JS haben die Einschränkung, dass die Anwendung kein benutzerdefiniertes Styling für eine wiederverwendbare Komponente bereitstellen kann. Dies ist in den oben genannten Situationen durchaus akzeptabel, nicht jedoch, wenn Sie die sichtbaren Eigenschaften, insbesondere die Farbe, ändern.

James K Nelson in seinem Brief "Warum sollten Sie Komponenten nicht mit JavaScript formatieren" gibt an, dass es eigentlich nicht notwendig ist, Inline-Styles mit ihren Nachteilen zu verwenden. Seine Aussage ist, dass alte langweilige CSS mit weniger/scss die beste Lösung ist. Der Teil seiner Thesen zu Gunsten von css:

• extern erweiterbar
• hebelfähig (Inline-Styles überlagern alles)
• designerfreundlich

Ich gebe jeder meiner wiederverwendbaren Komponenten einen eindeutigen benutzerdefinierten Elementnamen und dann eine CSS-Datei für diese Komponente, insbesondere mit allen Stiloptionen für diese Komponente (und nur für diese Komponente). 

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

In der Datei 'custom-component.css' beginnt jeder Eintrag mit dem Tag für benutzerdefinierte Komponenten:

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

Das heißt, Sie verlieren den kritischen Gedanken der Trennung von Anliegen nicht. Vs Stil anzeigen. Wenn Sie Ihre Komponente freigeben, ist es für andere einfacher, sie mit dem Rest ihrer Webseite abzugleichen.

Es hängt wirklich davon ab, wie groß Ihre Anwendung ist, wenn Sie Bundler wie webpack verwenden und CSS und JS im Build zusammenfassen möchten und wie Sie Ihren Anwendungsfluss verwalten möchten! Am Ende des Tages können Sie, abhängig von Ihrer Situation, eine Entscheidung treffen!

Meine Präferenz für das Organisieren von Dateien in großen Projekten ist die Trennung von CSS- und JS -Dateien. Es könnte einfacher sein, sie gemeinsam zu nutzen. Benutzer der Benutzeroberfläche können einfacher CSS-Dateien durchgehen.

Denken Sie immer so, stellen Sie sicher, dass sich in der Entwicklungsphase alles dort befindet, wo sie sein sollten, richtig benannt und anderen Entwicklern die Möglichkeit zu geben, Dinge zu finden ...

Ich persönlich mische sie abhängig von meinen Bedürfnissen, zum Beispiel ..... Versuchen Sie, externe CSS zu verwenden, aber wenn nötig, akzeptiert React auch Stil, Sie müssen ihn als ein Objekt mit Schlüsselwert übergeben, etwa wie folgt:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

Abhängig von Ihrer Konfiguration kann das Inline-Styling Hot Reload anbieten. Die Webseite wird bei jeder Stiländerung sofort erneut gerendert. Dies hilft mir, Komponenten schneller zu entwickeln. Ich bin sicher, Sie können eine Hot-Reload-Umgebung für CSS + SCSS einrichten.

Ich habe normalerweise eine scss-Datei, die jeder React-Komponente zugeordnet ist. Ich sehe jedoch keinen Grund, warum Sie die Komponente nicht mit Logik kapseln und in sie hineinschauen würden. Ich meine, Sie haben eine ähnliche Sache mit Webkomponenten.

Sie können auch StrCSS verwenden, es erzeugt isolierte Klassennamen und vieles mehr! Beispielcode würde aussehen. Sie können (optional) die VSCode-Erweiterung vom Visual Studio Marketplace zur Unterstützung der Syntaxhervorhebung installieren!

quelle: 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>;
  }
}

Bei einigen Komponenten ist es einfacher, Inline-Stile zu verwenden. Außerdem finde ich es einfacher und übersichtlicher (da ich Javascript und nicht CSS benutze), um Komponentenstile zu animieren.

Für eigenständige Komponenten verwende ich den 'Spread Operator' oder '...'. Für mich ist es klar, schön und arbeitet auf engem Raum. Hier ist eine kleine Animation, die ich erstellt habe, um ihre Vorteile zu zeigen: 

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

Dann habe ich in ComponentWillMount () ein Intervall so eingestellt ...

this.interval = setInterval(() => {
  let colors = this.state.colors;
  let opacity = this.state.opacity;

  if(this.props.reverse) {
    let color = colors[colors.length-1];
    colors.pop();
    colors.unshift(color)
  } else {
    let color = colors[0];
    colors.shift();
    colors.Push(color);
  }

  opacity['opacity'] < 1 ? opacity['opacity']+=0.06 : null;

  this.setState({colors, opacity});
}, this.speed);

Das Problem bei Inline-Styles ist, dass Content Security Policies (CSP) immer häufiger werden und dies nicht zulässt. Daher empfehle ich, Inline-Stile vollständig zu vermeiden.

Update: Zur weiteren Erläuterung sind CSP HTTP-Header, die vom Server gesendet werden und die einschränken, welche Inhalte auf der Seite angezeigt werden können. Es ist einfach eine weitere Abschwächung, die auf einen Server angewendet werden kann, um einen Angreifer daran zu hindern, etwas Unartiges zu tun, wenn der Entwickler die Site schlecht codiert.

Die meisten dieser Einschränkungen dienen dazu, XSS-Angriffe (Cross Site Scripting) zu stoppen. In XSS kann ein Angreifer herausfinden, wie er sein eigenes Javascript in Ihre Seite aufnehmen kann (wenn ich beispielsweise meinen Benutzernamen bob<SCRIPT>alert("hello")</SCRIPT> mache und dann einen Kommentar posten und Sie die Seite besuchen, sollte keine Warnung angezeigt werden). Entwickler sollten die Möglichkeit ablehnen, dass ein Benutzer der Site Inhalte wie diesen hinzufügt. Wenn sie jedoch einen Fehler gemacht haben, blockiert CSP das Laden der Seite, wenn script>-Tags gefunden werden.

CSP ist nur ein zusätzlicher Schutz für Entwickler, um sicherzustellen, dass ein Angreifer bei einem Fehler nicht den Besuchern dieser Website Probleme bereiten kann.

Also alles XSS, aber was ist, wenn der Angreifer keine <script>-Tags, sondern <style>-Tags oder einen style=-Parameter in ein Tag aufnehmen kann? Dann kann er möglicherweise das Erscheinungsbild der Website so ändern, dass Sie die falsche Schaltfläche oder ein anderes Problem anklicken müssen. Dies ist weniger ein Problem, aber immer noch etwas zu vermeiden, und CSP erledigt das für Sie.

Eine gute Ressource zum Testen einer Site für CSP ist https://securityheaders.io/

Weitere Informationen zu CSP finden Sie unter: http://www.html5rocks.com/de/tutorials/security/content-security-policy/

Hier ist der boolesche Stil inJSXSyntax:

style={{display: this.state.isShowing ? "inherit" : "none"}}

Sie können Inline-Stile verwenden, es gibt jedoch einige Einschränkungen, wenn Sie sie in allen Stilen verwenden. Bekannte Einschränkungen sind, dass Sie keine CSS-Pseudo-Selektoren und media-Abfragen dort verwenden können.

Sie können Radiumhttps://github.com/FormidableLabs/radium verwenden, um das Problem zu lösen, aber ich habe das Gefühl, dass das Projekt anwächst.

Ich würde empfehlen, CSS-Module zu verwendenhttps://github.com/css-modules/css-modules

wenn Sie CSS Modules verwenden, haben Sie die Freiheit, CSS in CSS-Dateien zu schreiben, und Sie müssen sich keine Gedanken über die Namenskonflikte machen, es wird von CSS-Modulen übernommen.

Ein Vorteil dieser Methode besteht darin, dass Sie der jeweiligen Komponente Styling-Funktionalität geben. Dadurch wird viel wartungsfähigerer Code und eine lesbare Projektarchitektur für den nächsten Entwickler erstellt, der an Ihrem Projekt arbeiten kann.

Im Vergleich zum Schreiben Ihrer Stile in eine CSS-Datei hat das Stilattribut von React die folgenden Vorteile:

1. Die Möglichkeit, die Tools Javascript als Programmiersprache zu verwenden, bietet die Möglichkeit, den Stil Ihrer Elemente zu steuern. Dies umfasst das Einbetten von Variablen, das Verwenden von Bedingungen und das Übergeben von Stilen an eine untergeordnete Komponente.
2. Ein "komponentieller" Ansatz. Keine Trennung von HTML-, JS- und CSS-Code für die Komponente mehr. Der Code der Komponente wird konsolidiert und an einer Stelle geschrieben.

Das Stilattribut React hat jedoch einige Nachteile - das ist nicht möglich

1. Medienabfragen können nicht verwendet werden
2. Pseudo-Selektoren können nicht verwendet werden.
3. weniger effizient im Vergleich zu CSS-Klassen.

Mit CSS in JS können Sie alle Vorteile eines Style-Tags nutzen, ohne diese Nachteile zu haben. Ab heute gibt es einige populäre, gut unterstützte CSS in js-Bibliotheken, darunter Emotion, Styled-Components und Radium. Diese Bibliotheken sind sozusagen das, was React für HTML ist. Mit ihnen können Sie Ihr CSS schreiben und Ihr CSS in Ihrem JS-Code steuern.

vergleichen wir, wie unser Code für die Gestaltung eines einfachen Elements aussehen wird. Wir werden ein "Hallo Welt" -Div gestalten, damit es auf dem Desktop groß und auf dem Handy kleiner angezeigt wird.

nter Verwendung des style-Attributs

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

Da eine Medienabfrage in einem Style-Tag nicht möglich ist, müssen wir dem Element einen Klassennamen und eine CSS-Regel hinzufügen.

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

Verwenden des 10-css-Tags von Emotion

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Emotion unterstützt auch Template-Strings sowie gestaltete Komponenten. Also, wenn Sie es vorziehen, können Sie schreiben:

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

Hinter den Kulissen verwendet "Css in JS" CSS-Klassen. Emotion wurde speziell für die Leistung entwickelt und verwendet Caching. Im Vergleich zu React -Stilattributen bietet Css in JS eine bessere Leistung.

Best Practices

Hier sind einige von mir empfohlene Best Practices:

1. Wenn Sie Ihre Elemente inline oder in Ihrem JS formatieren möchten, verwenden Sie eine css-in-js-Bibliothek, und verwenden Sie kein style-Attribut.

Soll ich versuchen, alle Stile auf diese Weise zu erstellen, und überhaupt keine Stile in meiner CSS-Datei angegeben haben?

2. Wenn Sie eine css-in-js-Lösung verwenden, müssen Sie keine Stile in Css-Dateien schreiben. Das Schreiben Ihres CSS in JS ist überlegen, da Sie alle Tools einer Programmiersprache verwenden können, die JS bereitstellt.

sollte ich Inline-Stile komplett vermeiden?

3. Das Strukturieren Ihres Stilcodes in JS ähnelt dem Strukturieren Ihres Codes im Allgemeinen. Zum Beispiel:
   • stile erkennen, die sich wiederholen, und sie an einer Stelle schreiben. In Emotion gibt es zwei Möglichkeiten, dies zu tun:

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

• Das Reaktionskodierungsmuster besteht aus gekapselten Komponenten. HTML und JS, die eine Komponente steuern, werden in eine Datei geschrieben. Dort befindet sich Ihr CSS/Style-Code, mit dem Sie die Komponente formatieren können.

• Fügen Sie Ihrer Komponente bei Bedarf ein Styling-Requisit hinzu. Auf diese Weise können Sie in einer untergeordneten Komponente geschriebenen Code und Stil wiederverwenden und von der übergeordneten Komponente an Ihre spezifischen Anforderungen anpassen.

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

Manchmal müssen wir ein Element aus einer Komponente formatieren, aber wenn wir nur diese Komponenten anzeigen müssen oder der Stil so gering ist, dass wir statt der CSS-Klasse den Inline-Stil in react js verwenden. Der Inline-Stil von reactj ist derselbe wie der HTML-Inline-Stil, nur dass die Eigenschaftsnamen ein wenig unterschiedlich sind

Schreibe deinen Stil in ein beliebiges Tag mit style = {{prop: "value"}}

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

Das Styling in JSX ist dem Styling in HTML sehr ähnlich.

HTML-Fall:

div style = "Hintergrundfarbe: rot; Farbe: weiß"

JSX-Fall:

div style = {{backgroundColor: 'red', Farbe: 'white'}}