Skip to main content

Architecture SCSS

Notre thème WordPress utilise une structure organisée pour le SCSS et le JavaScript, facilitant le développement et la maintenance.

Cette architecture permet une gestion efficace des styles et des scripts, assurant ainsi que le site soit à la fois performant et visuellement cohérent.

Les fichiers SCSS sont organisés dans une structure modulaire qui permet de séparer les styles en fonction de leur contexte et de leur usage.

Voici un exemple de l'architecture CSS utilisée dans notre thème.

Architecture Scss
themes/
└── <votre-projet>/
    └── assets/
        ├── main.scss
        ├── admin.scss
        └── styles/
            ├── _comments.scss
            ├── _typo.scss
            ├── _search.scss
            └── partials/
                ├── _buttons.scss
                ├── _tags.scss
                ├── _card.scss
                ├── _pagination.scss
                └── ...

Nos fichiers principaux qui seront chargés sur le sites se trouvent dans le répertoire /assets, vous y trouverez nottament :

  • /assets/main.scss Tous les fichiers Scss (pour le front du site) sont chargés depuis ce fichier principal.
  • /assets/admin.scss Fichier utilisé pour styliser le back-office, l'administration du wordpress.

Mais aussi tous les "sous-fichiers" pour les codes scss du site (front-office et back-office). Ainsi que les .scss associés aux "partials" (expliqué sur cette page).

  • /assets/styles/_[...].scss Tous les fichiers .scss "globaux"
  • /assets/styles/partials/_[...].scss Tous les fichiers .scss liés aux blocs "partials"
  • /assets/styles/admin/_[...].scss Tous les fichiers liés au back-office

Partials​

Les fichiers partiels, situés dans le dossier /partials, contiennent des styles spécifiques à des blocs réutilisables, tels que les boutons, les tags et les cartes. Cela facilite la réutilisation des styles et rend le fichier principal plus propre et plus facile à gérer.

Chargement des fichiers SCSS​

Tous les sous-fichiers mentionnés, ainsi que ceux liés aux composants du site sont chargés depuis ce fichier /assets/main.scss.

Ce sera ce fichier qui au build, sera compilé, minifié et déplacé dans le dossier /dist/assets.

Voici un exemple de contenu de ce fichier :

/assets/main.scss
@import
  'styles/admin/timber_topmenu',

  'styles/form',
  'styles/mixins',
  'styles/sal',
  'styles/comments',
  'styles/table',
  'styles/fonts',
  'styles/typo',
  'styles/global',
  'styles/contrastes',

  'styles/single',
  'styles/search',
  'styles/popup',
  
  'styles/partials/title',
  'styles/partials/buttons',
  'styles/partials/tags',
  'styles/partials/card',
  'styles/partials/pagination',
  'styles/partials/filAriane',
  'styles/partials/jqueryUiSelect';

// stylelint-disable-next-line scss/at-import-no-partial-leading-underscore, scss/at-import-partial-extension-blacklist
@import '../Components/**/_style.scss';

Nottez ici la nomenclature : les fichiers .scss se nomment avec un caractère "_" au début de leur nom de fichier, mais celui-ci n'est pas nécessaire pour les @import dans ce fichier.

tip

Les styles des composants sont importés de manière globale avec un pattern ../Components/**/*_style.scss, ce qui signifie que tout fichier se terminant par _style.scss dans le dossier des composants sera inclus automatiquement.

Pour modifier ou étendre les styles et les fonctionnalités, référez-vous simplement à la structure ci-dessus et ajoutez vos modifications dans les fichiers appropriés. Vous pouvez également ajouter de nouveau fichiers .scss et les inclure dans le fichier /assets/main.scss si nécessaire.