Skip to content

Organisation et syntaxe du CSS

Jean-Bernard PHAM edited this page Sep 11, 2017 · 14 revisions

L'intégration se base sur le less de bootstrap par conséquent le stater 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/less/layouts doivent être des sections complètes d'intégration qui peut être réutiliser sur l'ensemble du site. Ex: header.less

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

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

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

Commentaire CSS

Conseils sur les commentaires :

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

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

Mettre des commentaires

Ex: // Title

Organisation du LESS

Espacer les différents règles dans les fichiers less afin que le less soit claire 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 LESS

  • <nom>-wrap ex: home-wrap
  • <nom>-section ex: search-section
  • <nom>-block
  • <nom>-title
  • <nom>-text
  • <nom>-link
Clone this wiki locally