Best practice per lo stile in linea di React.js

Sono consapevole che puoi specificare gli stili all'interno delle classi React, in questo modo:

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

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

Dovrei mirare a fare tutto lo styling in questo modo e non ho alcun stile specificato nel mio file CSS?

O dovrei evitare completamente gli stili in linea?

Sembra strano e disordinato fare un po 'di entrambi - due punti dovrebbero essere controllati quando modifichi lo stile.

Non ci sono ancora molte "Best Practices". Quelli di noi che usano stili in linea, per i componenti di React, stanno ancora sperimentando molto.

Esistono diversi approcci che variano notevolmente: Reagisci grafico di confronto lib in stile in linea

Tutto o niente?

Quello che chiamiamo "stile" in realtà include alcuni concetti:

• Layout: aspetto di un elemento / componente in relazione agli altri
• Aspetto: le caratteristiche di un elemento / componente
• Comportamento e stato: l'aspetto di un elemento / componente in un determinato stato

Inizia con stili di stato

React sta già gestendo lo stato dei componenti, questo crea stili di stato e comportamento un adattamento naturale per la colocazione con la logica dei componenti.

Invece di creare componenti per il rendering con classi di stato condizionali, prendere in considerazione l'aggiunta diretta di stili di stato:

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

Nota che stiamo usando una classe per definire l' aspetto ma non stiamo più usando alcuna .is-classe con prefisso per stato e comportamento .

Possiamo usare Object.assign(ES6) o _.extend(trattino basso / lodash) per aggiungere supporto per più stati:

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

Personalizzazione e riusabilità

Ora che lo stiamo usando Object.assigndiventa molto semplice rendere riutilizzabile il nostro componente con stili diversi. Se vogliamo ignorare gli stili predefiniti, siamo in grado di farlo al call-sito con oggetti di scena, in questo modo: <TodoItem dueStyle={ fontWeight: "bold" } />. Implementato in questo modo:

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

disposizione

Personalmente, non vedo motivi validi per incorporare gli stili di layout. Esistono numerosi fantastici sistemi di layout CSS. Ne userei solo uno.

Detto questo, non aggiungere stili di layout direttamente al tuo componente. Avvolgi i tuoi componenti con componenti di layout. Ecco un esempio

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

Per il supporto del layout, provo spesso a progettare componenti per essere 100% widthe height.

Aspetto

Questa è l'area più controversa del dibattito "inline-style". In definitiva, dipende dal componente che stai progettando e dal comfort del tuo team con JavaScript.

Una cosa è certa, avrai bisogno dell'assistenza di una biblioteca. Gli stati del browser ( :hover, :focus) e le media query sono dolorosi in React non elaborato.

Mi piace il radio perché la sintassi di quelle parti dure è progettata per modellare quella di SASS.

Organizzazione del codice

Spesso vedrai un oggetto stile al di fuori del modulo. Per un componente todo-list, potrebbe assomigliare a questo:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

funzioni getter

L'aggiunta di un sacco di logica di stile al tuo modello può diventare un po 'confusa (come visto sopra). Mi piace creare funzioni getter per calcolare gli stili:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

Ulteriore osservazione

Ho discusso di tutto ciò in modo più dettagliato a React Europe all'inizio di quest'anno: Inline Styles e quando è meglio "usare solo CSS" .

Sono felice di aiutarti mentre fai nuove scoperte lungo la strada :) Hit me up -> @chantastic

L'attributo di stile in React prevede che il valore sia un oggetto, ovvero una coppia di valori chiave.

style = {}avrà un altro oggetto al suo interno, come {float:'right'}per farlo funzionare.

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

Spero che questo risolva il problema

Uso ampiamente gli stili in linea all'interno dei miei componenti React. Trovo molto più chiaro raggruppare gli stili all'interno dei componenti perché è sempre chiaro quali stili il componente ha e non ha. Inoltre, avere tutta la potenza di Javascript a portata di mano semplifica davvero le esigenze di stile più complesse.

All'inizio non ero convinto, ma dopo essermi dilettato per diversi mesi, sono completamente convertito e sono in procinto di convertire tutti i miei CSS in metodi CSS in linea o altri basati su JS.

Anche questa presentazione del dipendente di Facebook e del collaboratore di React "vjeux" è davvero utile - https://speakerdeck.com/vjeux/react-css-in-js

Lo scopo principale dell'attributo style è per stili dinamici basati sullo stato. Ad esempio, potresti avere uno stile di larghezza su una barra di avanzamento basata su uno stato o sulla posizione o sulla visibilità basata su qualcos'altro.

Gli stili in JS impongono la limitazione che l'applicazione non può fornire uno stile personalizzato per un componente riutilizzabile. Ciò è perfettamente accettabile nelle suddette situazioni, ma non quando si cambiano le caratteristiche visibili, in particolare il colore.

James K Nelson nella sua lettera "Perché non dovresti stile reagire componenti con JavaScript" afferma che in realtà non è necessario utilizzare gli stili in linea con i suoi lati negativi. La sua affermazione è che il vecchio css noioso con meno / scss è la soluzione migliore. La parte delle sue tesi a favore del CSS:

• estendibile esternamente
• sfruttabile (gli stili integrati incorporano tutto)
• Facile usare

Lo styling in JSX è molto simile allo styling in HTML.

Caso HTML:

div style = "background-color: red; color: white"

Custodia JSX:

div style = {{backgroundColor: 'rosso', colore: 'bianco'}}

Quello che faccio è assegnare a ciascun componente riutilizzabile un nome di elemento personalizzato univoco e quindi creare un file CSS per quel componente, in particolare, con tutte le opzioni di stile per quel componente (e solo per quel componente).

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

E nel file 'custom-component.css', ogni voce inizierà con il tag del componente personalizzato:

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

Ciò significa che non perdi la nozione critica di separazione delle preoccupazioni. Visualizza vs stile. Se condividi il tuo componente, è più facile che altri lo abbinino al resto della loro pagina web.

Dipende davvero da quanto è grande la tua applicazione, se vuoi usare bundle come webpack e raggruppare CSS e JS insieme nella build e come vuoi gestire il tuo flusso di applicazioni! Alla fine della giornata, dipende dalla tua situazione, puoi prendere una decisione!

La mia preferenza per l'organizzazione di file in grandi progetti è la separazione dei file CSS e JS , potrebbe essere più facile condividere, più facile per le persone dell'interfaccia utente semplicemente passare attraverso i file CSS, anche l'organizzazione di file molto più ordinata per l'intera applicazione!

Pensa sempre in questo modo, assicurati che nella fase di sviluppo tutto sia dove dovrebbero essere, nominato correttamente ed essere facile da trovare per gli altri sviluppatori ...

Personalmente li mescolo dipende dalle mie necessità, per esempio ... Prova a usare i CSS esterni, ma se necessario React accetterà anche lo stile, devi passarlo come un oggetto con valore chiave, qualcosa di simile qui sotto:

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;

Ecco lo stile basato su booleano nella sintassi JSX :

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

Di solito ho un file scss associato ad ogni componente di React. Ma non vedo il motivo per cui non incapsuli il componente con la logica e non ci guardi dentro. Voglio dire, hai qualcosa di simile con i componenti web.

A seconda della configurazione, lo stile in linea può offrirti Ricarica a caldo. La pagina web viene immediatamente ridistribuita ogni volta che lo stile cambia. Questo mi aiuta a sviluppare i componenti più rapidamente. Detto questo, sono sicuro che puoi configurare un ambiente di ricarica Hot per CSS + SCSS.

Puoi usare gli stili in linea ma avrai alcune limitazioni se li stai usando in tutti i tuoi stili, alcune limitazioni note sono che non puoi usare pseudo selettori CSS e media query lì dentro.

Puoi usare Radium per risolvere questo problema, ma penso che il progetto cresca diventerà ingombrante.

Consiglierei di usare i moduli CSS .

usando i moduli CSS avrai la libertà di scrivere CSS nel file CSS e non dovrai preoccuparti degli scontri con i nomi, sarà curato dai moduli CSS.

Un vantaggio di questo metodo è che offre funzionalità di stile al componente specifico. Ciò creerà un codice molto più gestibile e un'architettura di progetto leggibile per il prossimo sviluppatore che lavorerà sul tuo progetto.

Per alcuni componenti, è più facile usare gli stili in linea. Inoltre, trovo più facile e più conciso (poiché sto usando Javascript e non CSS) per animare gli stili dei componenti.

Per i componenti autonomi, utilizzo "Spread Operator" o "...". Per me è chiaro, bello e funziona in uno spazio ristretto. Ecco una piccola animazione di caricamento che ho realizzato per mostrare i suoi vantaggi:

<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
  }
}

MODIFICA NOVEMBRE 2019

Lavorando nel settore (una società di Fortune 500), NON mi è permesso realizzare alcun styling in linea. Nel nostro team, abbiamo deciso che lo stile in linea è illeggibile e non mantenibile. E, dopo aver visto in prima persona come gli stili inline rendono il supporto di un'applicazione completamente intollerabile, dovrei essere d'accordo. Scoraggio completamente gli stili in linea.

Il problema con gli stili inline è che le Politiche di sicurezza dei contenuti (CSP) stanno diventando più comuni, il che non lo consente. Pertanto, consiglio di evitare completamente gli stili in linea.

Aggiornamento: per chiarire ulteriormente, CSP sono le intestazioni HTTP inviate dal server che limitano il contenuto che può essere visualizzato sulla pagina. È semplicemente un'ulteriore mitigazione che può essere applicata a un server per impedire a un utente malintenzionato di fare qualcosa di cattivo se lo sviluppatore codifica male il sito.

Lo scopo della maggior parte di queste restrizioni è bloccare gli attacchi XSS (cross-site scripting). XSS è il punto in cui un utente malintenzionato trova un modo per includere il proprio javascript nella tua pagina (ad esempio, se creo il mio nome utente bob<SCRIPT>alert("hello")</SCRIPT>e poi pubblico un commento e visiti la pagina, non dovrebbe mostrare un avviso). Gli sviluppatori dovrebbero negare la possibilità che un utente aggiunga contenuti come questo al sito, ma nel caso in cui abbiano commesso un errore, CSP blocca il caricamento della pagina se trova script>tag.

I CSP sono solo un ulteriore livello di protezione per gli sviluppatori per garantire che se hanno commesso un errore, un utente malintenzionato non può causare problemi ai visitatori di quel sito.

In modo che tutto sia XSS, ma cosa succede se l'attaccante non può includere <script>tag ma può includere <style>tag o includere un style=parametro su un tag? Quindi potrebbe essere in grado di cambiare l'aspetto del sito in modo tale da indurti a fare clic sul pulsante sbagliato o ad altri problemi. Questo è molto meno preoccupante, ma comunque qualcosa da evitare, e CSP lo fa per te.

Una buona risorsa per testare un sito per CSP è https://securityheaders.io/

Puoi leggere di più su CSP all'indirizzo: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Rispetto alla scrittura dei tuoi stili in un file CSS, l'attributo di stile di React presenta i seguenti vantaggi :

1. La possibilità di utilizzare gli strumenti javascript come linguaggio di programmazione consente di controllare lo stile dei tuoi elementi. Ciò include l'incorporamento di variabili, l'utilizzo di condizioni e il passaggio di stili a un componente figlio.
2. Un approccio "componental". Non è più necessaria la separazione di codice HTML, JS e CSS scritto per il componente. Il codice del componente è consolidato e scritto in un'unica posizione.

Tuttavia, l' attributo di stile di React presenta alcuni svantaggi : non è possibile

1. Impossibile utilizzare le query multimediali
2. Non è possibile utilizzare pseudo-selettori,
3. meno efficiente rispetto alle classi CSS.

Utilizzando CSS in JS, puoi ottenere tutti i vantaggi di un tag di stile, senza quegli svantaggi . Ad oggi ci sono alcuni popolari css ben supportati nelle librerie js, tra cui: Emotion, Styled-Components e Radium. Quelle librerie sono per css tipo di ciò che React è per HTML. Ti consentono di scrivere i tuoi CSS e controllarli nel tuo codice JS.

confrontiamo il modo in cui il nostro codice cercherà lo stile di un semplice elemento. Daremo uno stile "ciao mondo" in modo che sia grande sul desktop e più piccolo sui dispositivi mobili.

Utilizzando l'attributo di stile

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

Poiché la query multimediale non è possibile in un tag di stile, dovremo aggiungere un className all'elemento e aggiungere una regola CSS.

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

Usando il tag 10 css di Emotion

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

Emotion supporta anche stringhe di modelli e componenti con stile. Quindi se preferisci puoi scrivere:

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

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

Dietro le cappe "Css in JS" usa le classi css. L'emozione è stata creata appositamente per le prestazioni e utilizza la memorizzazione nella cache. Rispetto agli attributi di stile React Css in JS fornirà prestazioni migliori.

Migliori pratiche

Ecco alcune delle migliori pratiche che raccomando:

1. Se vuoi dare uno stile ai tuoi elementi in linea o nel tuo JS, usa una libreria css-in-js, non usare un attributo di stile.

Dovrei mirare a fare tutto lo styling in questo modo e non ho alcun stile specificato nel mio file CSS?

2. Se usi una soluzione css-in-js non è necessario scrivere stili nei file Css. Scrivere i tuoi CSS in JS è superiore in quanto puoi usare tutti gli strumenti che un linguaggio di programmazione fornisce JS.

dovrei evitare completamente gli stili in linea?

3. Strutturare il codice di stile in JS è abbastanza simile alla strutturazione del codice in generale. Per esempio:
   • riconoscere gli stili che si ripetono e scriverli in un unico posto. Ci sono due modi per farlo in Emotion:

// 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>
   )
}

• Il modello di codifica React è composto da componenti incapsulati: HTML e JS che controllano un componente sono scritti in un file. Ecco dove appartiene il tuo codice css / style a cui appartiene quel componente.

• Se necessario, aggiungi un supporto per lo styling al tuo componente. In questo modo è possibile riutilizzare il codice e lo stile scritti in un componente figlio e personalizzarlo in base alle proprie esigenze specifiche dal componente padre.

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>
)

Puoi usare anche StrCSS, crea nomi di classe isolati e molto altro! Il codice di esempio sarebbe simile. È possibile (facoltativo) installare l'estensione VSCode da Visual Studio Marketplace per il supporto dell'evidenziazione della sintassi!

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

Un po 'di tempo richiediamo lo stile di un elemento da un componente, ma se dobbiamo mostrare quel componente solo uno o lo stile è così inferiore, allora invece di usare la classe CSS andiamo per lo stile inline in reagire js. Lo stile inline di reazioni è uguale allo stile in linea di HTML, solo i nomi delle proprietà sono leggermente diversi

Scrivi il tuo stile in qualsiasi tag usando 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;

Aggiornamento 2020: la migliore pratica è quella di utilizzare una libreria che ha già fatto il duro lavoro per te e non uccide il tuo team quando fai il passaggio, come sottolineato dalla risposta inizialmente accettata in questo video (è ancora pertinente). Anche solo per avere un'idea delle tendenze, questo è un grafico molto utile . Dopo aver fatto le mie ricerche su questo ho scelto di usare Emotion per i miei nuovi progetti e si è dimostrato molto flessibile e scalabile.

Dato che la risposta più votata dal 2015 ha raccomandato Radium, che ora è relegato in modalità di manutenzione . Quindi sembra ragionevole aggiungere un elenco di alternative. Il post che interrompe Radium suggerisce alcune biblioteche. Ognuno dei siti collegati ha esempi prontamente disponibili, quindi mi trattengo dal copiare e incollare il codice qui.

• L'emozione che è "ispirata da" componenti di stile tra gli altri, usa gli stili in js e può essere agnostica dal quadro, ma promuove sicuramente la sua libreria React. L'emozione è stata mantenuta aggiornata a partire da questo post.
• i componenti di stile sono comparabili e offrono molte delle stesse caratteristiche di Emotion. Anche attivamente mantenuto. Sia Emotion che i componenti con stile hanno sintassi simile. È stato progettato appositamente per funzionare con i componenti React.
• JSS Ancora un'altra opzione per gli stili in js che è framework agnostico sebbene abbia un numero di pacchetti framework, tra cui React-JSS.

In ogni caso, i CSS in linea non sono mai raccomandati. Nel nostro progetto abbiamo utilizzato componenti stilizzati basati su JSS. Protegge l'override dei CSS aggiungendo nomi di classe dinamici ai componenti. Puoi anche aggiungere valori CSS in base agli oggetti di scena passati.