_style.scss
Chaque composant de notre thème WordPress, peux disposer de son propre fichier de style _style.scss (optionnel). Ce fichier contient tous les styles CSS spécifiques au composant, permettant ainsi une séparation claire des préoccupations et facilitant les modifications ou les mises à jour des styles.
Chargement Automatique
Le système de build de notre thème est configuré pour détecter et compiler automatiquement les fichiers _style.scss de chaque composant (voir la page chargement des fichiers SCSS). Ainsi, lorsque vous créez ou modifiez le fichier _style.scss d'un composant, les styles sont intégrés dans le fichier CSS final du thème sans étape supplémentaire nécessaire.
Ce fichier doit impérativement être nommé _style.scss.
Nomenclature scss
Pour garantir l'unicité et éviter les conflits de styles entre les composants, nous utilisons une nomenclature spécifique basée sur le nom du composant :
[is='bubble-gallerie'] {
.title{
@apply text-project-h1 text-sncf-noir;
}
}
[is='bubble-gallerie'] est un sélecteur attribut CSS qui cible un élément spécifique du composant Gallerie. Cette approche assure que les styles définis dans _style.scss s'appliquent uniquement au composant Gallerie, sans affecter d'autres éléments du thème.