Utilisation des modules CSS dans React

Un cas pour les modules CSS et comment les implémenter dans votre application React

Si vous êtes relativement nouveau en CSS, vous avez peut-être rencontré ou non le problème important qui se produit lorsque le style d'une application se développe - puisque les règles CSS suivent une portée globale , deux classes ou plus du même nom entreront en collision. La gestion de plusieurs feuilles de style et le suivi des conventions de dénomination dans les fichiers CSS peuvent devenir fastidieux, et si vous ne faites pas assez attention, vous risquez de rencontrer des conflits avec des noms de classe identiques.

Les modules CSS peuvent résoudre ces erreurs susceptibles d'apparaître, notamment au fur et à mesure que votre application se développe. Ils nous permettent finalement d'utiliser le même nom de classe dans plusieurs fichiers sans erreurs de sélecteur et de règle en étendant les noms de classe localement par défaut.

Un module CSS est simplement un .cssfichier, où les classes agissent de la même manière que les variables locales en Javascript. C'est un outil qui rend chaque classe unique en incluant un hachage dans son nom.

Créer un module CSS

Si vous utilisez create-react-app, créer un module CSS pour un composant est relativement simple. Suivez la convention de dénomination typique pour un fichier css, mais insérez moduleavant .css, comme ceci:[name].module.css

Pour voir un exemple, voici mon Task.module.cssfichier dans une application simple à faire:

Si j'ai une autre boxclasse dans un composant différent qui a une couleur différente, ces règles ne se heurteront pas puisque les modules appliquent la portée locale .

Pour importer un module CSS dans le composant correspondant, importez la feuille de style des modules css sous la forme stylesou [name]Styles:

Dans JSX, utilisez la classe CSS définie comme prop className comme ceci:

De là, vous pouvez ajouter autant d'autres modules CSS que vous le souhaitez, n'oubliez pas d'importer chacun sous un nom différent.

Avec les modules CSS, vous pouvez créer des fichiers CSS portables et réutilisables sans avoir à vous soucier des collisions de noms de sélecteurs ou des règles ayant un impact sur les styles d'un autre composant.

Souvent, lorsqu'ils sont confrontés à la décision de style des applications React, les développeurs sont déchirés entre l'utilisation de modules CSS ou d'une bibliothèque CSS-in-JS ( outil pour résumer le CSS au niveau du composant ) comme styled-components, Emotion ou styled-jsx. Alors que les bibliothèques CSS-in-JS sont de plus en plus utilisées et courantes pour décrire les styles de manière déclarative, j'ai remarqué que beaucoup croient encore que les modules CSS sont la voie à suivre, en particulier pour leurs qualités modulaires et réutilisables qui rendent l'expérience de style encore plus sans couture.