Meilleures pratiques pour le style en ligne de React.js
Je suis conscient 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>;
}
});
Devrais-je viser tous les styles de cette façon et ne pas spécifier de styles du tout dans mon fichier CSS?
Ou devrais-je éviter complètement les styles inline?
Il semble étrange et compliqué de faire un peu des deux. Deux endroits doivent être vérifiés lors du peaufinage du style.
Il n'y a pas encore beaucoup de "meilleures pratiques". Ceux d'entre nous qui utilisent des styles inline, pour les composants React, expérimentent encore beaucoup.
Il existe un certain nombre d'approches qui varient énormément: Tableau de comparaison des réactions de style inline de style
Tout ou rien?
Ce que nous appelons le "style" comprend en fait pas mal de concepts:
- Mise en page - l'apparence d'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 des styles d'état
React gère déjà l'état de vos composants, cela rend les styles de state et behavior parfaitement adaptés à la colocation avec votre logique de composant.
Au lieu de créer des composants à rendre 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 style apparence, mais que nous n'utilisons plus aucune classe préfixée par .is- pour state et behavior.
Nous pouvons utiliser Object.assign (ES6) ou _.extend (trait de soulignement/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 utilisons Object.assign, il 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 sur le site d’appel avec des accessoires, comme ceci: <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'inclure des styles de mise en page. Il existe un certain nombre d'excellents systèmes de mise en forme CSS. Je n'en utiliserais qu'un.
Cela dit, n’ajoutez pas de styles de présentation 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 les composants de manière à être 100%width et height.
Apparence
C'est le domaine le plus controversé du débat "en ligne". En fin de compte, c'est au composant que vous concevez et au confort de votre équipe de travailler avec JavaScript.
Une chose est certaine, vous aurez besoin de l'aide d'une bibliothèque. Les états de navigateur (:hover, :focus) et les requêtes de support sont pénibles dans React brut.
J'aime bien Radium parce que la syntaxe de ces parties dures est conçue pour modéliser celle du SASS.
Organisation du code
Vous verrez souvent un objet de style en dehors du module. Pour un composant de liste de tâches, cela pourrait ressembler à ceci:
var styles = {
root: {
display: "block"
},
item: {
color: "black"
complete: {
textDecoration: "line-through"
},
due: {
color: "red"
}
},
}
fonctions getter
Ajouter un peu de logique de style à votre modèle peut devenir un peu salissant (comme on le voit ci-dessus). J'aime créer des fonctions getter pour calculer les 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
Au début de l’année, j’ai abordé toutes ces questions plus en détail à React Europe: Styles en ligne et quand il est préférable d’utiliser simplement du CSS .
Je suis heureux de pouvoir vous aider à faire de nouvelles découvertes tout au long du chemin :) Hit me up -> @chantastic
L'attribut de style dans React s'attend à ce que la valeur soit un objet, c'est-à-dire une paire clé-valeur.
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ésoudra le problème
J'utilise énormément les styles en ligne dans mes composants React. Je trouve qu'il est beaucoup plus facile de co-localiser les styles dans les composants, car les styles que le composant possède et n'a pas toujours sont clairement définis. De plus, disposer de toute la puissance de Javascript simplifie réellement les besoins en matière de style plus complexes.
Au début, je n'étais pas convaincu, mais après y avoir jonglé pendant plusieurs mois, je suis entièrement converti et je suis en train de convertir tout mon code CSS en méthode CSS intégrée ou autre.
Cette présentation de "vjeux", employé de Facebook et contributeur de React, est également très utile - https://speakerdeck.com/vjeux/react-css-in-js
L'objectif principal de l'attribut style est destiné aux styles dynamiques, basés sur des états. Par exemple, une barre de progression peut comporter un style de largeur basé sur un état, ou une position ou une visibilité basée sur autre chose.
Les styles dans JS imposent la limitation selon laquelle 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 ne pas créer de style pour les composants React avec JavaScript" indique qu’il n’est pas nécessaire d’utiliser des styles intégrés avec ses inconvénients. Sa déclaration est que vieux css ennuyeux avec moins/scss est la meilleure solution. La partie de ses thèses en faveur de css:
- extensible à l'extérieur
- pouvant être levé (les styles en ligne dépassent tout)
- concepteur convivial
Ce que je fais est de donner à chacun de mes composants réutilisables un nom d'élément personnalisé unique, puis de 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-composant.css', chaque entrée commencera par la balise custom-composant:
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 thématiser pour qu'il corresponde au reste de leur page Web.
Cela dépend vraiment de la manière dont big votre application est, si vous voulez utiliser des bundles comme webpack et associez CSS et JS ensemble dans la construction et comment vous voulez gérer votre flux d’applications! En fin de journée, cela dépend de votre situation, vous pouvez prendre une décision!
Ma préférence pour l’organisation des fichiers dans les grands projets est la séparation des fichiers CSS et JS , il pourrait être plus facile de partager, plus facile pour les utilisateurs de l’interface utilisateur de simplement consulter les fichiers CSS, ainsi qu’une organisation beaucoup plus ordonnée des fichiers pour toute l’application!
Pensez toujours de cette façon, assurez-vous qu'en phase de développement, tout est là où il devrait être, nommé correctement et que les autres développeurs puissent trouver facilement des choses ...
Personnellement, je les mélange en fonction de mes besoins, par exemple .......... Essayez d'utiliser un css externe, mais si nécessaire, React acceptera également le style, vous devez le transmettre en tant qu'objet avec une valeur de clé, comme 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;
Selon votre configuration, le style en ligne peut vous proposer un rechargement à chaud. La page Web est immédiatement rendue à chaque changement de style. 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.
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 de la logique et ne le regarderiez pas. Je veux dire, vous avez la même chose avec les composants Web.
Vous pouvez également utiliser StrCSS, il crée des noms de classe isolés et bien plus encore! 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: 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>;
}
}
Pour certains composants, il est plus facile d'utiliser des styles inline. De plus, je trouve cela plus facile et plus concis (j'utilise Javascript et non CSS) d'animer les styles de composants.
Pour les composants autonomes, j'utilise "Spread Operator" ou "...". Pour moi, c'est clair, beau, et travaille 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
}
}
Ensuite, dans composantWillMount (), je fixe un intervalle comme suit ...
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);
Le problème avec les styles en ligne est que les politiques de sécurité du contenu (CSP) deviennent de plus en plus courantes, ce qui ne le permet pas. Par conséquent, je recommande d'éviter complètement les styles en ligne.
Update: Pour expliquer davantage, les CSP sont des en-têtes HTTP envoyés par le serveur qui limitent le contenu pouvant apparaître sur la page. Il s'agit simplement d'une mesure d'atténuation supplémentaire pouvant ê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.
Le but de la plupart de ces restrictions est d'arrêter les attaques XSS (cross-site scripting). XSS est le moyen par lequel un attaquant trouve un moyen d’inclure son propre code javascript sur votre page (par exemple, si je crée mon nom d’utilisateur bob<SCRIPT>alert("hello")</SCRIPT>, puis que je poste un commentaire, et que vous visitez la page, elle ne devrait pas afficher une alerte). Les développeurs doivent refuser la possibilité qu'un utilisateur ajoute un contenu de ce type sur le site, mais au cas où ils commettraient une erreur, CSP bloque le chargement de la page si elle trouve des balises script>.
Les CSP constituent simplement un niveau de protection supplémentaire pour les développeurs, qui garantissent, s’ils commettent une erreur, qu’un attaquant ne peut pas causer de problèmes aux visiteurs de ce site.
Donc tout est XSS, mais que se passe-t-il si l'attaquant ne peut pas inclure les balises <script> mais peut inclure des balises <style> ou inclure un paramètre style= sur une balise? Ensuite, il pourra peut-être changer l'apparence du site de manière à vous inciter à cliquer sur le mauvais bouton ou à résoudre un autre problème. C'est beaucoup moins une préoccupation, mais c'est quand même une 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 le CSP à: http://www.html5rocks.com/fr/tutorials/security/content-security-policy/
Voici le style booléen dansJSXsyntax:
style={{display: this.state.isShowing ? "inherit" : "none"}}
Vous pouvez utiliser des styles inline, mais vous aurez certaines limitations si vous les utilisez dans tous vos styles, certaines limitations connues étant que vous ne pouvez pas utiliser les pseudo-sélecteurs CSS et les requêtes media.
Vous pouvez utiliser Radiumhttps://github.com/FormidableLabs/radium pour résoudre ce problème, mais j’ai l’impression que le projet prend de l’encombrement.
Je recommanderais d'utiliser modules CSShttps://github.com/css-modules/css-modules
en utilisant CSS Modules, vous aurez la liberté d'écrire CSS dans un fichier CSS sans avoir à vous soucier des conflits de noms, cela sera pris en charge par les modules CSS.
Un avantage de cette méthode est qu’elle vous donne une fonctionnalité de style pour le composant spécifique. Cela créera un code beaucoup plus facile à gérer et une architecture de projet lisible pour le prochain développeur qui travaillera sur votre projet.
En comparant l'écriture de vos styles dans un fichier css, l'attribut style de React présente les avantages suivants:
- 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.
- Une approche "composée". Plus de séparation des codes HTML, JS et CSS écrits pour le composant. Le code du composant est consolidé et écrit en un seul endroit.
Cependant, le l'attribut de style de React présente quelques inconvénients - vous ne pouvez pas
- Impossible d'utiliser les requêtes multimédia
- Impossible d'utiliser des pseudo sélecteurs,
- 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. À l’heure actuelle, quelques bibliothèques css bien supportées sont bien connues, notamment: Emotion, Styled-Components et Radium. Ces bibliothèques sont de type css de ce que React est HTML. Ils vous permettent d'écrire votre CSS et de contrôler votre CSS dans votre code JS.
comparons comment notre code cherchera à styler un élément simple. Nous appelons une division "hello world", donc elle est grande sur le bureau et plus petite sur le mobile.
tilisation de l'attribut style
return (
<div style={{fontSize:24}} className="hello-world">
Hello world
</div>
)
Comme la requête multimédia n'est pas possible dans une balise de style, nous devrons ajouter un className à l'élément et ajouter une règle css.
@media screen and (max-width: 700px){
.hello-world {
font-size: 16px;
}
}
tilisation de la balise 10 CSS de Emotion
return (
<div
css={{
fontSize: 24,
[CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
fontSize: 16
}
}
>
Hello world
</div>
)
Emotion prend également en charge les modèles de chaîne ainsi que les composants stylés. 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 le capot, "Css in JS" utilise des classes css. Emotion a été spécialement conçue pour la performance et utilise la mise en cache. Comparé à React attributs de style, Css dans JS offrira de meilleures performances.
Les meilleures pratiques
Voici quelques meilleures pratiques que je recommande:
- Si vous souhaitez styler vos éléments en ligne, ou dans votre JS, utilisez une bibliothèque css-in-js, n'utilisez pas d'attribut style.
Devrais-je viser à faire tout le style de cette façon, et ne pas avoir de styles du tout spécifiés dans mon fichier CSS?
- Si vous utilisez une solution css-in-js, il n'est pas nécessaire d'écrire des styles dans les fichiers Css. Écrire vos css dans JS est supérieur car vous pouvez utiliser tous les outils d'un langage de programmation fourni par JS.
dois-je éviter complètement les styles en ligne?
- Structurer votre code de style dans JS est assez similaire à la structuration de votre code en général. Par exemple:
- reconnaissez les styles qui se répètent et écrivez-les au même endroit. Il y a deux façons de faire cela 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 constitué de composants encapsulés - HTML et JS qui contrôlent un composant sont écrits dans un seul fichier. C’est là que votre code css/style pour styler 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 le personnaliser selon vos besoins spécifiques en fonction du 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>
)
Nous avons parfois besoin de mettre en forme un élément d’un composant, mais si nous devons n’afficher que ce composant ou si le style est tellement inférieur, au lieu d’utiliser la classe CSS, nous utilisons le style inline dans react js. Le style en ligne de reactjs est identique au style en ligne HTML, mais les noms de propriétés sont légèrement différents
Ecrivez 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;
Le style dans JSX est très similaire au style HTML.
Cas HTML:
div style = "couleur de fond: rouge; couleur: blanc"
Affaire JSX:
style div = {{backgroundColor: 'rouge', couleur: 'blanc'}}