Theme 32 Blank

Appearance

Guidelines de Développement Frontend ​

Ce document présente les bonnes pratiques et les recommandations pour le développement frontend d'un projet.

Structure des fichiers CSS ​

S'il fallait résumer en quelques mots l'organisation du dossier styles, ça serai : Il suit l'organisation du dossier resources/views

├── resources             
│   └──  styles                 
│   │   ├── components    # contient l'ensemble des composants et blocs
│   │   ├── mixins       
│   │   ├── pages         # contient le style des templates et pages
│   │   ├── partials      # contient les styles de partials
│   │   ├── sections      # contient les styles des sections 
│   │   ├── tailwindcss   # contient les déclarations de classes utiles tailwindcss
│   │   └── variable      # contient l'ensemble des variables css

Nommage des classes ​

  • BEM (Block Element Modifier) doit être utilisé pour le nommage des classes afin de rendre le code lisible et maintenable.
    • Exemple : .button__primary--large, .form__input--error

Réutilisabilité et Extensibilité ​

  • Eviter les styles en ligne dans le HTML. Utiliser des classes pour un code plus propre et réutilisable.
  • Pour les styles généraux (comme les boutons, formulaires, etc.), utiliser des variables CSS pour faciliter la modification globale du design.
  • N'hésitez pas à reprendre les classes et structures des blocs Gutenberg

Responsivité ​

  • Mobile First ou Desktop first : à vous de voir, deux mixins sont ajouté dans le Thème 32 Blank (@include max-width() et @include min-width()). Elles prennents comme valeur les breakpoints de tailwindcss mais vous pouvez leur passer des valeurs décimale.
  • Utiliser des unités relatives comme em, rem ou % plutôt que des unités fixes comme px. Pour vous facilité l'intégration des unités rem, une fonction rem() est disponible.

Accessibilité et Performance ​

  • Veiller à ce que les différents éléments respectent les critères d'accessibilité (par exemple, aria-label, aria-hidden).
  • Les blocs ne doivent pas inclure de fichiers JavaScript ou CSS inutiles. Utiliser des scripts et styles en lazy loading si possible. Voir les imports dynamiques de vite.js

En suivant ces guidelines, vous garantissez un code propre, maintenable, et cohérent à travers l'ensemble des projets 32 😉.