Skip to content

Organisation et syntaxe du CSS

Jean-Bernard PHAM edited this page Mar 17, 2022 · 14 revisions

L'intégration se base sur le sass de bootstrap par conséquent le starter utilise les variables de bootstrap afin qu'il est moins de surcharge css.

** Adapter les règles suivantes aux projets(framework, css) afin que l'intégration soit le plus clean **

Hiérarchie des fichiers

Tout les fichiers du dossier /src/sass/layouts doivent être des sections complètes d'intégration qui peut être réutiliser sur l'ensemble du site. Ex: header.scss

Tout les fichiers du dossier /src/sass/components doivent être des composants de formes. Ex: buttons.scss

Le dossier /src/sass/mixins comprend tous les mixins. Ex: flex.scss

Tout les fichiers du dossier /src/sass/pages doivent être l'intégration des éléments spécifiques à la page. Ex: home.scss

Commentaire CSS

Conseils sur les commentaires :

Ajouter à la première ligne d'un nouveau fichier sass, le nom de la page en commentaire.

Ex: /* ---- Home ---- */

Mettre des commentaires

Ex: // Title

Organisation du SASS

Espacer les différents règles dans les fichiers sass afin que le sass soit clair et visible.

Utiliser des class en priorité par rapport au attribut html.

Eviter d'utiliser la class du body mais créer plutôt une div avec la class home-wrap.

Syntaxe sass

  • <nom>-wrap ex: home-wrap
  • <nom>-section ex: search-section
  • <nom>-block
  • <nom>-title
  • <nom>-text
  • <nom>-link