Styles

Les styles du projet sont centralisés dans le dossier resources/styles.
Ils combinent Tailwind CSS 3.4 et des feuilles de styles organisées par responsabilité, afin de garantir une base claire, maintenable et évolutive.

L’objectif est de séparer :

• les fondations (reset, variables, configuration Tailwind),
• les composants et sections (UI réutilisable),
• les styles contextuels (pages, editor Gutenberg).

Organisation du dossier

resources/
└─ styles/
    ├─ app.scss
    ├─ editor.scss
    ├─ _reset.scss
    ├─ variables/
    ├─ tailwindcss/
    ├─ components/
    ├─ sections/
    ├─ partials/
    ├─ pages/
    ├─ mixins/
    └─ ...

Point d’entrée : app.scss

Le fichier app.scss est le point d’entrée principal des styles front-end.

Il est responsable de :

• importer le reset
• charger les variables CSS globales
• inclure Tailwind (base/components/utilities)
• importer les styles du projet (components, sections, pages, etc.)

📌 app.scss doit rester un fichier d’orchestration : il contient peu de CSS direct, et surtout des imports.

---

Styles éditeur : editor.scss

Le fichier editor.scss contient les styles spécifiques à l’éditeur Gutenberg.
Il sert à :

• rapprocher le rendu dans l’éditeur de celui du front
• appliquer des styles dédiés à l’interface d’édition
• éviter de charger tout le CSS front complet dans l’admin

📌 Tout style destiné uniquement à l’éditeur doit être placé ici (ou importé ici).

---

_reset.scss

_reset.scss contient les styles de normalisation (reset) appliqués au projet.

• uniformise le rendu entre navigateurs
• définit des bases typographiques et des comportements par défaut
• évite les styles “implicites” du navigateur

variables/

Le dossier variables contient des variables CSS globales (CSS custom properties).

On y place :

• couleurs (si nécessaires en variables)
• tailles (spacing, radius, etc.)

Elles suivent une méthode de construction claire et organisé :

--t32b--{scope}--{category}--{directive}

** exemple **

--t32b--global--color--background-color ou --t32b--button-hover--color--background-color

📌 Les variables sont en CSS (pas en SCSS) pour rester disponibles au runtime (thèmes, dark mode, overrides, etc.).

tailwindcss/

Le dossier tailwindcss regroupe les classes utiles supplémentaire.

components/

Le dossier components contient les styles des composants UI réutilisables.

Exemples :

• boutons
• cards
• forms
• badges

Chaque fichier doit rester ciblé, avec un scope clair (BEM, classes utilitaires, ou @layer si vous structurez via Tailwind).

sections/

Le dossier sections contient les styles des sections de pages, souvent liées à des blocs ou à des zones de layout.

Exemples :

• header
• footer

➡️ Une section peut regrouper plusieurs composants, mais reste orientée “composition de page”.

partials/

Le dossier partials regroupe des styles partagés, souvent transverses, qui ne sont pas des composants complets.

Exemples :

• page-header

pages/

Le dossier pages contient les styles spécifiques à une page ou un template précis.

Ces styles doivent rester l’exception :

• utilisés uniquement quand une page a un besoin très particulier
• éviter d’y recréer des composants (qui doivent aller dans components/)

mixins/

Le dossier mixins contient les mixins SCSS utilisés dans le projet.

On y place :

• mixins responsive (si nécessaires)
• utilitaires SCSS (clearfix, patterns, etc.)
• helpers de génération

📌 Les mixins sont utiles pour les cas non couverts par Tailwind ou pour factoriser des patterns SCSS existants.

Bonnes pratiques

• Utiliser Tailwind quand la compléxité est faible. Dès qu'on a beaucoup de classe Tailwind, envisagez de passer par des classes BEM classique.
• Utiliser dès que possible les variables disponible. N'hésitez pas à en créer de nouvelle.
• Réserver pages/ aux besoins spécifiques non réutilisables
• Garder les fichiers courts et ciblés (1 responsabilité par fichier)

Résumé L’organisation du dossier resources/styles permet de structurer les styles de manière claire : fondations (reset, variables, Tailwind), composants/sections réutilisables et styles contextuels (pages, éditeur).

📌 Un style doit être placé dans le dossier correspondant à sa responsabilité, jamais par commodité.