doc: css modules guide (#161)

content/docs/guides/contribute/conventions/front.en.md

@@ -61,6 +61,46 @@ Si par exemple nous avons un composant `rollingStockSelector` qui propose une li
 
 Ainsi, on a la garantie que l'image contenue dans la carte de matériel roulant héritera bien des bonnes propriétés css `.rollinStockSelector.rollingStockList.rollingStockCard.rollingStockImg`.
 
+#### CSS Modules
+CSS modules allow scoping CSS styles to a specific component, thereby avoiding conflicts with global class names.
+
+Vite natively supports CSS modules. Ensure that your CSS file has the `.module.css` extension, for example, `styles.module.css`.
+
+##### Using CSS Modules in Components
+
+1. **Create an SCSS file with the `.module.scss` extension**:
+
+```css
+/* MyComponent.module.scss */
+.container {
+  background-color: white;
+}
+
+.title {
+  font-size: 24px;
+  color: #333;
+}
+```
+
+2. **Use the classes in your React component**:
+
+Vite transforms classes into objects that contain hashed classes (e.g., `_container_h3d8bg`) and uses them during bundle generation, making the classes unique.
+
+```tsx
+import React from 'react';
+import styles from './MyComponent.module.scss';
+
+export function MyComponent() {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles["title"]}>My Title</h1>
+    </div>
+  );
+};
+```
+
+For more information, you can refer to the [Vite.js documentation](https://vitejs.dev/guide/features.html#css-modules).
+
 #### Noms de classes, utilisation de `cx()`
 Les classes sont ajoutées les unes à la suite des autres, normalement, dans la propriété `className=""`.
 

content/docs/guides/contribute/conventions/front.fr.md

@@ -40,7 +40,7 @@ _Rédaction en cours_
 `projects/{nom du projet}/studies/{nom de l'étude}/scenarios/{nom du scenario}`
 
 ### Styles & SCSS
-> ATTENTION : en CSS/React, le scope d'une classe ne dépend pas de l'endroit où le fichier est importé mais est valide pour toute l'application. Si vous importez un fichier `scss` au fin fond d'un composant (ce que nous déconseillons fortement par ailleurs), ses classes seront disponibles pour toute l'application et peuvent donc provoquer des effets de bord.
+> ATTENTION : en CSS/React, le scope d'une classe ne dépend pas de l'endroit où le fichier est importé mais est valide pour toute l'application. Si vous importez un fichier `scss` au fin fond d'un composant (ce que nous déconseillons fortement par ailleurs), ses classes seront disponibles pour toute l'application et peuvent donc provoquer des effets de bord. Vous pouvez utiliser les CSS modules pour éviter les conflits.
 
 Il est donc très recommandé de pouvoir facilement suivre l'arborescence des applications, vues, modules et composants également au sein du code SCSS, et notamment imbriquer les noms de classes pour éviter les effets de bord, le compilateur se chargera de fabriquer la hiérarchie nécessaire.
 
@@ -61,6 +61,46 @@ Si par exemple nous avons un composant `rollingStockSelector` qui propose une li
 
 Ainsi, on a la garantie que l'image contenue dans la carte de matériel roulant héritera bien des bonnes propriétés css `.rollinStockSelector.rollingStockList.rollingStockCard.rollingStockImg`.
 
+#### CSS Modules
+Les CSS modules permettent de scoper les styles CSS à un composant spécifique, évitant ainsi les conflits de noms de classe globaux.
+
+Vite prend en charge nativement les CSS modules. Assurez-vous que votre fichier CSS a l'extension `.module.css`. Par exemple, `styles.module.css`.
+
+##### Utilisation des CSS modules dans les composants
+
+1. **Créez un fichier SCSS avec l'extension `.module.scss`** :
+
+```css
+/* MyComponent.module.scss */
+.container {
+  background-color: white
+}
+
+.title {
+  font-size: 24px;
+  color: #333;
+}
+```
+
+2. **Utilisez les classes dans votre composant React** :
+
+Vite transforme les classes en objets qui contiennent les classes hashées (exemple `_container_h3d8bg`) et les utilise au moment de la génération du bundle, rendant ainsi les classes uniques.
+
+```tsx
+import React from 'react';
+import styles from './MyComponent.module.scss';
+
+export function MyComponent() {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles["title"]}>Mon Titre</h1>
+    </div>
+  );
+};
+```
+
+Pour plus d'information, vous pouvez regarder la [documentation](https://vitejs.dev/guide/features.html#css-modules) de vite.js
+
 #### Noms de classes, utilisation de `cx()`
 Les classes sont ajoutées les unes à la suite des autres, normalement, dans la propriété `className=""`.