Organisation des SCSS.
Je cherche à mieux structurer mes dossiers de styles, maintenant que je suis définitivement en pré-processeur (et en SCSS), que j’essaye de découper au maximum en petits morceaux réutilisables, et que donc je suis censé avoir à la fois plein de fichiers modulaires, et d’autres propres au site en cours.
J’ai donc lu diverses ressources qui abordent le même problème.
D’abord, hors pré-processeur, en relisant le rangement de @tetue avec Daisy
▻http://romy.tetue.net/methode-daisy
En relisant aussi les trois proches méthodes de structuration des styles que sont OOCSS, Smacss et Atomic design. Une intro mêlant les trois en français ici :
▻http://www.24joursdeweb.fr/2013/le-design-atomique
Puis :
▻http://smacss.com/book
Et :
▻http://pattern-lab.info/about.html
Mais cela ne parle pas des dossiers et fichiers, donc enfin en cherchant des propositions de rangement réels :
Sur un des sites de la communauté Sass
▻http://thesassway.com/beginner/how-to-structure-a-sass-project
Par un mec qui a écrit un livre sur Sass
▻http://gist.io/4436524
Par le designer en chef de OneHub, sur Medium
▻https://medium.com/p/7fe19ab647fa
Avec tout cela, je n’ai pas encore choisi définitivement comment MOI je préfère ranger mes fichiers.
D’abord parce que je parle français et que tous mes collègues sont francophones, et que 99% de nos clients aussi. Donc pourquoi faire le mec à la mode en mettant de l’anglais partout ?
Inversement, le fait d’utiliser des mots que l’on trouve ailleurs, fait que les futurs lecteurs du code s’y retrouveront plus facilement. Et moi-même aussi, car lorsque je décide d’utiliser tel ou tel framework, je retrouve des termes similaires pour les dossiers, donc même tout seul ça aide.
De plus, une partie des termes vient aussi des langages utilisés, comme HTML5 par exemple. Donc peut-être mieux de ne pas mélanger.
(Par contre une idée : utiliser le français pour tous les trucs qui sont uniquement propre au site en cours (lorsque c’est un site fr bien sûr). Par exemple le nom des variables de couleurs, ou encore le noms des objets propres à ce site-là. Ainsi je distinguerai encore plus vite ce qui est commun, en anglais, de ce qui est propre au site, en français.)
Je suis intéressé par le découpage de Brad Frost, mais je trouve que les termes analogiques ne sont utiles que lorsqu’on explique le principe. Pour les vrais noms des dossiers ou fichiers de travail, je n’ai pas envie de mettre « atoms » ou « organisms », je trouve cela confus.
Les mots propres à un outil ou à une communauté précise me dérange un peu aussi. Par exemple le mot « partials » peut bien évidemment être utilisé autre part, mais il est surtout présent dans la communauté Sass car c’est le terme qui désigne les fichiers avec un « _ » devant (ceux qui ne sont pas compilés en CSS mais qui doivent uniquement être inclus).
Je n’ai donc pas trop envie d’utiliser ce mot non plus.
Pour l’instant, les premiers mots que j’ai retenu sont :
– frameworks/
pour les librairies externes, comme TinyTypo ou Bourbon
– sections/
ou zones/
(pas choisi encore mais « section » est déjà utilisé donc mieux) pour les styles propres à des zones précises (mais communes) des pages, comme header
, firstnav
, footer
, etc
– templates/
pour les styles qui seraient propres à des grands types de pages comme sommaire
, rubrique-galerie
– pages/
pour les styles propres à une page précise
Chaque morceau est censé être de plus en plus rarement utilisé, bien sûr !
Vous devriez avoir noté qu’il manque encore des choses. Car là-dedans je ne range pas encore les objets réutilisables, qui doivent forcément être avant « sections ». Ce sont les « organismes » dans le vocabulaires de Frost, qui ont une cohérence ensemble quelque soit la page et quelque soit la section dans laquelle on les insérera. Il faut un mot pour ça.
Peut-être patterns/
.
Il me manque aussi les choix graphiques généraux, pas dans une section particulière : c’est à dire en gros la surcharge de TinyTypo mais avec les couleurs, typos, tailles, etc, qui sont propres à ce site-là. Je ne sais pas encore vraiment pour ce point-là.
Dans mon vrai « theme.scss », j’aurais donc à peu près l’ordre d’importation :
– frameworks
– styles de base (personnalisation de tinytypo + ajouts)
– objets réutilisables
– styles de sections
– styles de templates
Il me reste aussi à définir si les gabarits ("layouts" en anglais) par défaut du site (pas ceux propres à un template), c’est-à-dire le placement sur les grilles des zones principales, doivent être définis dans chaque section (le section/header
défini son placement, le section/content
défini son placement, etc) ou bien plutôt dans un unique fichier ensemble. (Par contre les surcharges du layout par défaut seraient à priori bien dans templates/
.)
Si vous avez tout lu, vous êtes courageu⋅x⋅ses, mais il me fallait aplanir tout ça par écrit pour y voir plus clair. Ça peut vous aider, ou m’aider moi après commentaires.
Bisous. :)
#conception #design #HTML #CSS #SCSS #Sass #framework #structure #bonnes-pratiques #styleguide