Le style vous permet de définir l’aspect de votre site web et de créer une marque cohérente et esthétique. Bien que plusieurs approches utilisent les feuilles de style en cascade (Cascading Style Sheet ou CSS) pour styliser les pages web, les solutions basées sur JavaScript sont plus flexibles et vous donnent plus de contrôle que les feuilles de style en cascade standard.
L’une des méthodes les plus répandues consiste à utiliser les feuilles de style JavaScript (JSS), qui vous permettent d’écrire des styles CSS en JavaScript. Les JSS présentent plusieurs avantages, notamment l’utilisation de variables, d’expressions JavaScript et de fonctions pour créer des styles et des thèmes dynamiques.
Cet article explique le fonctionnement de JSS, ses avantages et la manière de l’utiliser dans vos applications JavaScript. Il aborde également la question des styles dynamiques, des thèmes et de l’optimisation des performances. Vous pouvez utiliser JSS avec de nombreux types d’applications, mais dans cet article, nous nous concentrerons sur JSS pour React.
Qu’est-ce que JSS ?
Avec JSS, vous pouvez écrire des styles CSS sous forme d’objets JavaScript et utiliser ces objets comme noms de classe dans des éléments ou des composants. JSS est agnostique au niveau du framework, vous pouvez donc l’utiliser en JavaScript vanille ou avec des frameworks comme React et Angular.
JSS présente plusieurs avantages par rapport au style CSS traditionnel :
- Style dynamique – Avec JSS, vous pouvez manipuler les styles en fonction des interactions de l’utilisateur ou de valeurs telles que les accessoires ou le contexte. Les fonctions JavaScript vous aident à générer dynamiquement des styles dans le navigateur en fonction de l’état de l’application, des données externes ou des API du navigateur.
- Capacités de thématisation améliorées – Vous pouvez créer des styles spécifiques à un thème particulier à l’aide de JSS. Par exemple, vous pouvez créer des styles pour un thème clair et un thème foncé, puis appliquer ces styles spécifiques à un thème à l’ensemble de l’application en fonction des préférences de l’utilisateur. Si vous utilisez React, le paquet React-JSS prend en charge la propagation de thèmes basée sur le contexte. Vous pouvez définir et gérer le thème en un seul endroit avant de transmettre les informations relatives au thème dans l’arborescence des composants à l’aide d’un fournisseur de thème.
- Amélioration de la maintenabilité – En définissant les styles dans des objets JavaScript, vous pouvez regrouper les styles similaires en un seul endroit et les importer dans votre application en cas de besoin. Cette approche réduit la duplication du code et améliore l’organisation du code, ce qui facilite la maintenance des styles au fil du temps.
- CSS réel – JSS génère du CSS réel plutôt que des styles en ligne qui peuvent être désordonnés et difficiles à gérer. JSS utilise par défaut des noms de classe uniques, ce qui vous permet d’éviter les collisions de noms causées par la nature globale de CSS.
Comment écrire des styles avec JSS
Cet article est basé sur un projet React. Il utilise le paquetage react-jss, qui intègre JSS à React à l’aide de l’API Hooks. react-jss est livré avec les extensions par défaut et vous permet d’utiliser JSS avec une configuration minimale.
Syntaxe de base et utilisation de JSS dans React
Pour utiliser JSS dans React, commencez par installer le paquet react-jss à l’aide d’un gestionnaire de paquets tel que npm ou Yarn.
La syntaxe d’écriture des styles dans JSS consiste à définir des règles CSS pour des éléments spécifiques au sein d’un objet JavaScript. Par exemple, le code suivant définit les styles d’un bouton dans une application React.
const styles = {
button: {
padding: "10px 20px",
background: "#f7df1e",
textAlign: "center",
border:"none"
}
};Remarque : les propriétés CSS sont en majuscules.
Pour appliquer ces styles à un élément HTML :
- Générez les classes en passant les styles
createUseStyles()à la méthode dereact-jss:
import { createUseStyles } from "react-jss";
const styles = {
button: {
padding: "10px 20px",
background: "#f7df1e",
textAlign: "center",
border:"none"
}
};
const useStyles = createUseStyles(styles);- Appliquez le CSS à l’élément bouton en utilisant le nom de la classe générée :
const App = () = > {
const classes = useStyles();
return (
< button className={classes.button} > </button >
);
};Ce code crée un composant React et applique les styles dans l’objet styles.
Comment gérer les pseudo-classes, les requêtes de médias et les images clés ?
JSS prend en charge toutes les fonctionnalités CSS existantes, y compris les pseudo-classes, les requêtes de média et les images clés. Utilisez la même syntaxe que les règles de style CSS ordinaires pour définir les styles de ces fonctions.
Pseudo-classes
Supposons, par exemple, que vous souhaitiez ajouter une pseudo-classe de survol au bouton pour modifier la couleur d’arrière-plan lorsque l’utilisateur passe la souris dessus. Le code suivant met en œuvre cette pseudo-classe pour que l’arrière-plan du bouton devienne vert clair au survol :
const styles = {
button: {
padding: "10px 20px",
background: "#f7df1e",
textAlign: "center",
border:"none",
'&:hover': {
backgroundColor: 'lightgreen',
}
}
};Images clés
De même, vous pouvez appliquer une animation par image clé à un composant à l’aide de la règle @keyframes. Par exemple, vous trouverez ci-dessous un objet de style pour un composant en rotation.
const styles = {
'@keyframes spin': {
'0%': {
transform: 'rotate(0deg)',
},
'100%': {
transform: 'rotate(360deg)',
},
},
spinner: {
width: "100px",
height: "100px",
backgroundColor: "lightgreen",
animation: '$spin 1s linear infinite',
},
}Dans la fonction Styles, vous avez défini une animation d’image clé nommée spin à l’aide de la règle @keyframes. Ensuite, vous créez une classe appelée spinner qui applique l’animation en utilisant la syntaxe $ pour référencer l’animation d’image clé.
Requêtes de médias
Les requêtes de média utilisent également la syntaxe CSS habituelle dans JSS. Par exemple, pour modifier la taille de la police d’un bouton à une taille d’écran spécifique, utilisez les styles suivants :
const styles = {
button: {
fontSize: "12px",
'@media (max-width: 768px)': {
fontSize: '34px',
},
}
};Comme vous venez de le voir, l’écriture de styles en JSS n’est pas très différente de l’écriture d’un simple CSS. Cependant, son avantage est que vous pouvez exploiter la puissance de JavaScript pour rendre vos styles dynamiques.
Style dynamique avec JSS
Le style dynamique consiste à créer des styles qui changent en réponse à des conditions spécifiques. Dans React, les styles peuvent changer en fonction de valeurs telles que l’état, les accessoires et le contexte du composant.
Comment créer des styles dynamiques avec JSS
Dans JSS, vous pouvez appliquer conditionnellement des styles à vos éléments avec des expressions JavaScript pour créer des règles de style dynamiques.
Supposons que vous ayez un bouton qui reçoit une propriété appelée bgColor. Sa valeur est la couleur d’arrière-plan du bouton. Pour créer une règle de style qui modifie la couleur d’arrière-plan du bouton en fonction de la propriété, transmettez les propriétés à la méthode useStyles.
import { createUseStyles } from "react-jss"
const styles = {
button: {
padding: "10px 20px",
background: props = >props.bgColor,
textAlign: "center",
border:"none"
}
};
const Button = ({...props}) => {
const useStyles = createUseStyles(styles);
const classes = useStyles({...props});
return (
<button className={classes.button}>Button </button>
);
};Vous pouvez ensuite référencer les accessoires dans l’objet Styles. L’exemple ci-dessus fait référence à props.bgColor.
Vous pouvez transmettre la couleur d’arrière-plan que vous souhaitez lorsque vous effectuez le rendu du composant. Le composant ci-dessous rend deux composants Button avec les couleurs d’arrière-plan lightgreen et yellow.
export default function App() {
return (
<div >
<Button bgColor="lightgreen" />
<div style={{ marginTop: "10px" }}></div>
<Button bgColor="yellow" />
</div>
);
}
Chaque fois que vous rendez le composant Button, vous pouvez styliser l’arrière-plan comme vous le souhaitez.
Vous pouvez également modifier les styles en fonction de l’état d’un composant. Supposons que vous ayez un menu de navigation avec plusieurs liens. Pour mettre en évidence le lien de la page actuelle, définissez une valeur d’état appelée isActive qui détermine si un élément de lien du menu est actif.
Vous pouvez ensuite utiliser un opérateur ternaire JavaScript pour vérifier la valeur de isActive, en définissant la couleur du lien en bleu si l’état est true et en rouge si false.
const styles = {
a: {
color: ({ isActive }) => isActive ? 'blue' : 'red',
padding: '10px',
},
};Désormais, les liens actifs deviennent bleus et les liens inactifs deviennent rouges.
De même, vous pouvez créer un style dynamique basé sur le contexte. Vous pouvez styliser un élément, comme UserContext, en fonction de la valeur d’un contexte qui stocke le statut en ligne de l’utilisateur.
const { online } = useContext(UserContext);
const styles = {
status: {
background: online ? 'lightgreen' : '',
width: '20px',
height: '20px',
borderRadius: "50%",
display: online ? 'flex' : 'hidden'
},
};Dans cet exemple, l’élément a un arrière-plan vert si l’utilisateur est en ligne. Vous définissez la propriété display à flex si l’utilisateur est en ligne et à hidden s’il est hors ligne.
Cas d’utilisation de la stylisation dynamique
La stylisation dynamique est une fonctionnalité puissante de JSS qui a de nombreux cas d’utilisation :
- Création de thèmes – Vous pouvez définir des styles basés sur un objet thème, tel qu’un thème clair et un thème foncé, et les transmettre aux composants en tant que valeur prop ou contextuelle.
- Rendu conditionnel – JSS vous permet de définir des styles basés sur des valeurs spécifiques. Vous pouvez créer des styles qui ne s’appliquent que dans certaines conditions, par exemple lorsqu’un bouton est désactivé, qu’un champ de texte est dans un état d’erreur, qu’un menu de navigation latéral est ouvert ou qu’un utilisateur est en ligne.
- Conception responsive – Vous pouvez utiliser le style dynamique dans JSS pour modifier le style d’un élément en fonction de la largeur de la fenêtre de visualisation. Par exemple, vous pouvez définir un ensemble de styles pour un point de rupture spécifique à l’aide de requêtes multimédias et les appliquer de manière conditionnelle en fonction de la taille de l’écran.
Comment utiliser les thèmes avec JSS
Utilisez les thèmes pour fournir une interface utilisateur cohérente dans l’ensemble de votre application. Il est facile de créer des thèmes dans JSS : il suffit de définir un objet thème avec des valeurs de style globales, telles que les couleurs, la typographie et l’espacement. En voici un exemple :
const theme = {
colors: {
primary: '#007bff',
secondary: '#6c757d',
light: '#f8f9fa',
dark: '#343a40',
},
typography: {
fontFamily: 'Helvetica, Arial, sans-serif',
fontSize: '16px',
fontWeight: 'normal',
},
spacing: {
small: '16px',
medium: '24px',
large: '32px',
},
};Pour appliquer des thèmes à vos composants, utilisez des fournisseurs de contexte. La bibliothèque JSS fournit un composant ThemeProvider que vous pouvez envelopper autour des composants qui ont besoin d’accéder au thème.
Dans l’exemple suivant, le composant Button est enveloppé dans le composant ThemeProvider et l’objet theme lui est transmis en tant que propriété.
import { ThemeProvider } from "react-jss";
const App = () => (
<ThemeProvider theme={theme}>
<Button />
</ThemeProvider>
)Vous pouvez accéder au thème dans le composant Button à l’aide d’un crochet useTheme() et le transmettre à l’objet useStyles. L’exemple ci-dessous utilise les styles définis dans l’objet theme pour créer un bouton primaire.
import { useTheme } from “react-jss”
const useStyles = createUseStyles({
primaryButton: {
background: ({ theme }) => theme.colors.primary,
font: ({ theme }) => theme.typography.fontFamily,
fontSize: ({ theme }) => theme.typography.fontSize,
padding: ({ theme }) => theme.spacing.medium
}
});
const Button = () => {
const theme = useTheme()
const classes = useStyles({theme})
return (
<div>
<button className={classes.primaryButton}> Primary Button </button>
</div>
)
}Le bouton doit ressembler à l’image ci-dessous, avec un texte noir sur un bouton rectangulaire bleu.
Si vous modifiez l’une des valeurs de l’objet thème, cela déclenchera automatiquement l’application de nouveaux styles à tous les composants enveloppés par le composant ThemeProvider. Si vous changez la valeur de la couleur primaire en lightgreen, la couleur du bouton devient également vert clair, comme dans l’image ci-dessous.
Voici quelques règles à suivre lors de la création de thèmes :
- Définissez l’objet thème dans un fichier distinct pour que le code soit organisé et facile à maintenir.
- Utilisez des noms descriptifs pour les valeurs de style afin de faciliter la lecture et la mise à jour de l’objet thème.
- Utilisez des variables CSS pour définir les valeurs que vous utilisez souvent dans votre CSS.
- Créez des valeurs par défaut pour toutes les propriétés de style afin de maintenir une conception cohérente dans l’ensemble de votre application.
- Testez minutieusement vos thèmes pour vous assurer qu’ils fonctionnent comme prévu sur tous les appareils et navigateurs.
En suivant ces bonnes pratiques, vous créerez un thème simple à utiliser et facile à mettre à jour au fur et à mesure de l’évolution de votre application.
Performance et optimisation
JSS est une solution de style performante. Avec JSS, seuls les styles actuellement utilisés à l’écran sont ajoutés au modèle d’objet du document (DOM), ce qui réduit la taille du DOM et accélère le rendu. JSS met également en cache les styles rendus, ce qui signifie que JSS ne compile le CSS qu’une seule fois, améliorant ainsi encore les performances.
Vous pouvez bénéficier d’optimisations de performances supplémentaires en utilisant le paquetage react-jss au lieu du paquetage JSS core. Par exemple, react-jss supprime les feuilles de style lorsque le composant est démonté. Il gère également l’extraction CSS critique et n’extrait les styles que des composants rendus. C’est ainsi que le paquet react-jss réduit la taille du paquet CSS et améliore les temps de chargement.
Pour réduire davantage la taille du paquet CSS, utilisez la division de code pour charger uniquement les feuilles de style CSS dont une page ou un composant spécifique a besoin. Une bibliothèque comme loadable-components peut simplifier le fractionnement du code.
JSS vous permet également de générer des feuilles de style CSS côté serveur. Vous pouvez regrouper et filtrer le CSS attaché à l’aide de la classe de registre StyleSheet de JSS, puis envoyer les composants rendus et la chaîne CSS au client. Après le lancement de l’application, le CSS statique n’est plus nécessaire et vous pouvez le supprimer, ce qui réduit la taille du paquet.
Résumé
Vous avez appris les bases de la syntaxe JSS, comment créer et appliquer des objets de style aux composants et comment créer des styles dynamiques. Vous savez également comment utiliser le composant ThemeProvider pour appliquer des thèmes et améliorer les performances de JSS. Vous pouvez maintenant utiliser JSS pour créer des styles réutilisables, maintenables et dynamiques qui s’adaptent à diverses conditions.
