Meilleures pratiques de style en ligne React.js

Je sais que vous pouvez spécifier des styles dans les classes React, comme ceci:

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

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

Dois-je viser à faire tout le style de cette façon et n'avoir aucun style spécifié dans mon fichier CSS?

Ou dois-je éviter complètement les styles en ligne?

Il semble étrange et désordonné de faire un peu des deux - deux endroits devraient être vérifiés lors de l'ajustement du style.

Il n'y a pas encore beaucoup de "meilleures pratiques". Ceux d'entre nous qui utilisent des styles en ligne, pour les composants React, sont encore très expérimentés.

Il existe un certain nombre d'approches qui varient énormément: Tableau de comparaison de lib de style en ligne React

Tout ou rien?

Ce que nous appelons le «style» comprend en fait plusieurs concepts:

• Disposition - à quoi ressemble un élément / composant par rapport aux autres
• Apparence - les caractéristiques d'un élément / composant
• Comportement et état - à quoi ressemble un élément / composant dans un état donné

Commencez avec les styles d'état

React gère déjà l'état de vos composants, ce qui rend les styles d' état et de comportement parfaitement adaptés à la colocation avec la logique de vos composants.

Au lieu de créer des composants pour effectuer le rendu avec des classes d'état conditionnelles, envisagez d'ajouter directement des styles d'état:

// 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 : {}} />

Notez que nous utilisons une classe pour styliser l' apparence mais n'utilisons plus de .is-classe préfixée pour l' état et le comportement .

Nous pouvons utiliser Object.assign(ES6) ou _.extend(souligné / lodash) pour ajouter la prise en charge de plusieurs états:

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

Personnalisation et réutilisabilité

Maintenant que nous l'utilisons, Object.assignil devient très simple de rendre notre composant réutilisable avec différents styles. Si nous voulons remplacer les styles par défaut, nous pouvons le faire à l'appel site avec des accessoires, comme suit: <TodoItem dueStyle={ fontWeight: "bold" } />. Implémenté comme ceci:

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

Disposition

Personnellement, je ne vois pas de raison impérieuse d'instituer des styles de mise en page. Il existe un certain nombre d'excellents systèmes de mise en page CSS. J'en utiliserais juste un.

Cela dit, n'ajoutez pas de styles de disposition directement à votre composant. Enveloppez vos composants avec des composants de mise en page. Voici un exemple.

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

Pour la prise en charge de la mise en page, j'essaie souvent de concevoir des composants pour être 100% widthet height.

Apparence

Il s'agit du domaine le plus controversé du débat sur le "style en ligne". En fin de compte, c'est au composant que vous concevez et au confort de votre équipe avec JavaScript.

Une chose est sûre, vous aurez besoin de l'aide d'une bibliothèque. Les états du navigateur ( :hover, :focus) et les requêtes multimédias sont pénibles dans React brut.

J'aime Radium parce que la syntaxe de ces parties dures est conçue pour modéliser celle de SASS.

Organisation du code

Souvent, vous verrez un objet de style en dehors du module. Pour un composant todo-list, il pourrait ressembler à ceci:

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

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

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

fonctions getter

Ajouter un tas de logique de style à votre modèle peut devenir un peu compliqué (comme vu ci-dessus). J'aime créer des fonctions getter pour calculer des styles:

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

Regarder plus loin

J'ai discuté de tout cela plus en détail à React Europe plus tôt cette année: les styles en ligne et quand il est préférable de «simplement utiliser CSS» .

Je suis heureux de vous aider au fur et à mesure que vous faites de nouvelles découvertes :) Hit me up -> @chantastic

L'attribut style dans React s'attend à ce que la valeur soit un objet, c'est-à-dire une paire de valeurs clés.

style = {}aura un autre objet à l'intérieur comme {float:'right'}pour le faire fonctionner.

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

J'espère que cela résout le problème

J'utilise beaucoup de styles en ligne dans mes composants React. Je trouve tellement plus clair de colocaliser des styles dans des composants car il est toujours clair quels styles le composant a et n'a pas. De plus, avoir la pleine puissance de Javascript à portée de main simplifie vraiment les besoins de style plus complexes.

Je n'étais pas convaincu au début, mais après y avoir essayé pendant plusieurs mois, je suis entièrement converti et je suis en train de convertir tous mes CSS en ligne ou d'autres méthodes CSS pilotées par JS.

Cette présentation de l'employé de Facebook et contributeur de React "vjeux" est également très utile - https://speakerdeck.com/vjeux/react-css-in-js

L'objectif principal de l'attribut style est pour les styles dynamiques basés sur l'état. Par exemple, vous pouvez avoir un style de largeur sur une barre de progression en fonction d'un état, ou la position ou la visibilité en fonction d'autre chose.

Les styles dans JS imposent la limitation que l'application ne peut pas fournir de style personnalisé pour un composant réutilisable. Ceci est parfaitement acceptable dans les situations susmentionnées, mais pas lorsque vous modifiez les caractéristiques visibles, en particulier la couleur.

James K Nelson dans sa lettre «Pourquoi vous ne devriez pas styler les composants React avec JavaScript» déclare qu'il n'est pas vraiment nécessaire d'utiliser des styles en ligne avec ses inconvénients. Sa déclaration est que les vieux CSS ennuyeux avec moins / scss sont la meilleure solution. La partie de ses thèses en faveur de css:

• extensible à l'extérieur
• exploitable (les styles en ligne recouvrent tout)
• convivial pour les concepteurs

Le style dans JSX est très similaire au style dans HTML.

Cas HTML:

div style = "couleur de fond: rouge; couleur: blanc"

Cas JSX:

div style = {{backgroundColor: 'rouge', couleur: 'blanc'}}

Ce que je fais, c'est donner à chacun de mes composants réutilisables un nom d'élément personnalisé unique, puis créer un fichier CSS pour ce composant, en particulier, avec toutes les options de style pour ce composant (et uniquement pour ce composant).

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

Et dans le fichier 'custom-component.css', chaque entrée commencera par la balise custom-component:

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

Cela signifie que vous ne perdez pas la notion critique de séparation des préoccupations. Voir vs style. Si vous partagez votre composant, il est plus facile pour les autres de le mettre en thème pour qu'il corresponde au reste de leur page Web.

Cela dépend vraiment de la taille de votre application, si vous voulez utiliser des bundleurs comme webpack et regrouper CSS et JS ensemble dans la construction et comment vous voulez gérer votre flux d'application! À la fin de la journée, selon votre situation, vous pouvez prendre une décision!

Ma préférence pour organiser les fichiers dans les grands projets sépare les fichiers CSS et JS , il pourrait être plus facile de partager, plus facile pour les utilisateurs de l'interface utilisateur de simplement parcourir les fichiers CSS, et l'organisation des fichiers beaucoup plus soignée pour toute l'application!

Pensez toujours de cette façon, assurez-vous que dans la phase de développement, tout est là où ils devraient être, nommé correctement et que les autres développeurs trouvent facilement les choses ...

Personnellement, je les mélange en fonction de mes besoins, par exemple ... Essayez d'utiliser des CSS externes, mais si nécessaire, React acceptera également le style, vous devez le passer en tant qu'objet avec une valeur clé, quelque chose comme ceci ci-dessous:

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;

Voici le style basé sur booléen dans la syntaxe JSX :

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

J'ai généralement un fichier scss associé à chaque composant React. Mais, je ne vois pas pourquoi vous n'encapsuleriez pas le composant avec la logique et ne le regarderiez pas. Je veux dire, vous avez la même chose avec les composants Web.

Selon votre configuration, le style en ligne peut vous offrir un rechargement à chaud. La page Web est immédiatement restituée chaque fois que le style change. Cela m'aide à développer des composants plus rapidement. Cela dit, je suis sûr que vous pouvez configurer un environnement de rechargement à chaud pour CSS + SCSS.

Vous pouvez utiliser des styles en ligne mais vous aurez certaines limitations si vous les utilisez dans tous vos styles, certaines limitations connues sont que vous ne pouvez pas utiliser de pseudo-sélecteurs CSS et de requêtes multimédias .

Vous pouvez utiliser Radium pour résoudre ce problème, mais je pense que le projet prend de l'ampleur.

Je recommanderais d'utiliser des modules CSS .

en utilisant des modules CSS, vous aurez la liberté d'écrire CSS dans un fichier CSS et ne vous inquiétez pas des conflits de dénomination, cela sera pris en charge par les modules CSS.

Un avantage de cette méthode est qu'elle vous donne des fonctionnalités de style pour le composant spécifique. Cela créera un code beaucoup plus maintenable et une architecture de projet lisible pour que le prochain développeur travaille sur votre projet.

Pour certains composants, il est plus facile d'utiliser des styles en ligne. De plus, je trouve plus facile et plus concis (car j'utilise Javascript et non CSS) d'animer les styles de composants.

Pour les composants autonomes, j'utilise le «Spread Operator» ou le «...». Pour moi, c'est clair, beau et fonctionne dans un espace restreint. Voici une petite animation de chargement que j'ai faite pour montrer ses avantages:

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

MODIFIER NOVEMBRE 2019

Travaillant dans l'industrie (une entreprise Fortune 500), je ne suis PAS autorisé à faire de style en ligne. Dans notre équipe, nous avons décidé que le style en ligne était illisible et non maintenable. Et, après avoir vu de première main comment les styles en ligne rendent la prise en charge d'une application complètement intolérable, je dois être d'accord. Je décourage complètement les styles en ligne.

Le problème avec les styles en ligne est que les politiques de sécurité du contenu (CSP) sont de plus en plus courantes, ce qui ne le permet pas. Par conséquent, je recommande d'éviter complètement les styles en ligne.

Mise à jour: Pour expliquer davantage, les CSP sont des en-têtes HTTP envoyés par le serveur qui restreignent le contenu pouvant apparaître sur la page. Il s'agit simplement d'une atténuation supplémentaire qui peut être appliquée à un serveur pour empêcher un attaquant de faire quelque chose de méchant si le développeur code mal le site.

La plupart de ces restrictions ont pour but de stopper les attaques XSS (cross-site scripting). XSS est l'endroit où un attaquant trouve un moyen d'inclure son propre javascript sur votre page (par exemple, si je crée mon nom d'utilisateur bob<SCRIPT>alert("hello")</SCRIPT>et que je poste un commentaire, et que vous visitez la page, il ne devrait pas afficher d'alerte). Les développeurs devraient refuser à un utilisateur la possibilité d'ajouter du contenu comme celui-ci au site, mais juste au cas où ils auraient fait une erreur, le CSP bloque le chargement de la page s'il trouve des script>balises.

Les CSP ne sont qu'un niveau de protection supplémentaire pour les développeurs pour s'assurer qu'en cas d'erreur, un attaquant ne peut pas causer de problèmes aux visiteurs de ce site.

Donc, tout est XSS, mais que faire si l'attaquant ne peut pas inclure de <script>balises mais peut inclure des <style>balises ou inclure un style=paramètre sur une balise? Ensuite, il pourrait être en mesure de changer l'apparence du site de telle manière que vous êtes amené à cliquer sur le mauvais bouton ou tout autre problème. C'est beaucoup moins un problème, mais c'est quelque chose à éviter, et CSP le fait pour vous.

Une bonne ressource pour tester un site pour CSP est https://securityheaders.io/

Vous pouvez en savoir plus sur CSP à: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Par rapport à l'écriture de vos styles dans un fichier css, l'attribut style de React présente les avantages suivants :

1. La possibilité d'utiliser les outils javascript comme langage de programmation permet de contrôler le style de vos éléments. Cela inclut l'incorporation de variables, l'utilisation de conditions et la transmission de styles à un composant enfant.
2. Une approche "composante". Plus besoin de séparer le code HTML, JS et CSS écrit pour le composant. Le code du composant est consolidé et écrit en un seul endroit.

Cependant, l' attribut de style de React présente quelques inconvénients - vous ne pouvez pas

1. Impossible d'utiliser les requêtes multimédias
2. Impossible d'utiliser des pseudo-sélecteurs,
3. moins efficace que les classes CSS.

En utilisant CSS dans JS, vous pouvez obtenir tous les avantages d'une balise de style, sans ces inconvénients . À ce jour, il existe quelques css populaires bien pris en charge dans les bibliothèques js, notamment: Emotion, Styled-Components et Radium. Ces bibliothèques sont en quelque sorte ce que React est en HTML. Ils vous permettent d'écrire votre CSS et de contrôler votre CSS dans votre code JS.

comparons à quoi ressemblera notre code pour styliser un élément simple. Nous allons styliser un div "bonjour le monde" afin qu'il s'affiche grand sur le bureau et plus petit sur le mobile.

Utilisation de l'attribut style

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

Étant donné que la requête multimédia n'est pas possible dans une balise de style, nous devrons ajouter un nom de classe à l'élément et ajouter une règle css.

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

Utilisation de la balise 10 css d'Emotion

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

Emotion prend également en charge les chaînes de modèle ainsi que les composants de style. Donc, si vous préférez, vous pouvez écrire:

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

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

Derrière les hottes, "Css in JS" utilise des classes css. L'émotion a été spécifiquement conçue en pensant aux performances et utilise la mise en cache. Comparé aux attributs de style React, Css dans JS fournira de meilleures performances.

Les meilleures pratiques

Voici quelques bonnes pratiques que je recommande:

1. Si vous souhaitez styliser vos éléments en ligne, ou dans votre JS, utilisez une bibliothèque css-in-js, n'utilisez pas d'attribut style.

Dois-je viser à faire tout le style de cette façon et n'avoir aucun style spécifié dans mon fichier CSS?

2. Si vous utilisez une solution css-in-js, il n'est pas nécessaire d'écrire des styles dans les fichiers Css. L'écriture de votre CSS dans JS est supérieure car vous pouvez utiliser tous les outils d'un langage de programmation comme JS fournit.

dois-je éviter complètement les styles en ligne?

3. La structuration de votre code de style dans JS est assez similaire à la structuration de votre code en général. Par exemple:
   • reconnaître les styles qui se répètent et les écrire au même endroit. Il existe deux façons de procéder dans 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>
   )
}

• Le modèle de codage React est composé de composants encapsulés - HTML et JS qui contrôlent un composant sont écrits dans un fichier. C'est là que votre code CSS / style pour styliser ce composant appartient.

• Si nécessaire, ajoutez un accessoire de style à votre composant. De cette façon, vous pouvez réutiliser le code et le style écrits dans un composant enfant et les personnaliser selon vos besoins spécifiques par le composant parent.

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

Vous pouvez également utiliser StrCSS, il crée des noms de classe isolés et bien plus encore! Un exemple de code ressemblerait. Vous pouvez (facultatif) installer l'extension VSCode à partir de Visual Studio Marketplace pour la prise en charge de la coloration syntaxique!

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

Quelque temps, nous avons besoin de styliser un élément à partir d'un composant, mais si nous devons afficher ce composant uniquement ou si le style est tellement inférieur, au lieu d'utiliser la classe CSS, nous optons pour le style en ligne dans react js. le style inline reactjs est le même que le style inline HTML juste les noms des propriétés sont un peu différents

Écrivez votre style dans n'importe quelle balise en utilisant 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;

Mise à jour 2020: La meilleure pratique consiste à utiliser une bibliothèque qui a déjà fait le travail dur pour vous et ne tue pas votre équipe lorsque vous effectuez le changement, comme indiqué par la réponse initialement acceptée dans cette vidéo (elle est toujours pertinente). Aussi juste pour avoir une idée des tendances, c'est un tableau très utile . Après avoir fait mes propres recherches à ce sujet, j'ai choisi d'utiliser Emotion pour mes nouveaux projets et il s'est avéré très flexible et évolutif.

Étant donné que la réponse la plus positive de 2015 recommandait Radium qui est maintenant relégué en mode maintenance . Il semble donc raisonnable d'ajouter une liste d'alternatives. La publication de l' arrêt de Radium suggère quelques bibliothèques. Chacun des sites liés a des exemples facilement disponibles, donc je m'abstiendrai de copier et de coller le code ici.

• Une émotion "inspirée par" des composants de style, entre autres, utilise des styles en js et peut être indépendante du framework, mais promeut définitivement sa bibliothèque React. L'émotion a été maintenue à jour à ce jour.
• composants stylisés sont comparables et offrent un grand nombre des mêmes fonctionnalités que Emotion. Également activement entretenu. Les composants Emotion et styled ont une syntaxe similaire. Il est spécialement conçu pour fonctionner avec les composants React.
• JSS Encore une autre option pour les styles dans js qui est indépendante du framework même si elle a un certain nombre de packages de framework, React-JSS parmi eux.

Quoi qu'il en soit, le CSS en ligne n'est jamais recommandé. Nous avons utilisé des composants stylisés dans notre projet basé sur JSS. Il protège la substitution CSS en ajoutant des noms de classe dynamiques sur les composants. Vous pouvez également ajouter des valeurs css en fonction des accessoires passés.