Foundation 5 architecturer ses fichiers Interchange
Foundation interchange permet aux concepteurs de ne charger que le code HTML le plus approprié en fonction de l’appareil. Les navigateurs mobiles ne doivent pas gaspiller de bande passante en chargeant des ressources à destination des écrans larges, et inversement.
Mais cela signifie que chaque "page" peut avoir plusieurs sources sur le serveur Web. Vous pouvez organiser ces fichiers comme bon vous semble. Tant que les chemins sont corrects, interchange fonctionne très bien. Cependant, j’ai remarqué que pour de gros projets il faut vite mettre au point une organisation en respectant certaines bonnes pratiques. Voici quelques techniques que j'ai apprises.
Morceaux de code dans le même dossier
Organiser vos fichiers dans un dossier en dehors du site principal est une évidence.
Mais je conseille de stocker vos snippets Interchange ensembles, et non pas de les organiser dans des dossiers séparés comme "mobile", "tablette" et "complexe".
Un unique dossier, regroupant vos vues, permet de scanner plus rapidement et rend l’identification de vos extraits de code plus facile. Si vous avez une instance interchange pour chaque breakpoint, cette astuce vous épargnera de nombreuses crises de nerfs.
Plutôt que des dossiers séparés, je recommande d'utiliser des noms de fichiers intelligents.
Une règle pour les nommer tous
Nommer ses objets en fonction de ce qu’ils contiennent est plus intelligent que de les nommer en fonction de leur position. Par exemple nav-control.snippet.html
est bien mieux que page-header-menu.snippet.html
pour plusieurs raisons :
- Vous pouvez décider d'utiliser une navigation différente -par exemple, lors d'un événement saisonnier ou une vente temporaire.
- Vous pouvez décider de déplacer la navigation ailleurs dans le site, dans une
sidebar
ou unfooter
. - La mise en page ou la structure de votre site peuvent changer. Dans ce cas, vos noms de fichiers ne devraient pas avoir à faire de même.
Utiliser une structure de nommage
Ajouter .snippet.html
pour chaque fichier permet de différencier les documents HTML incomplets, des fichiers interchange qui seront chargés. Encore mieux généralement je spécifie les tailles comme ceci :
snippet.simple.html
snippet.medium.html
snippet.complex.html
Notez également que je ne nomme pas mes snippets en fonction de la taille ou l'emplacement prévu. Pas de "petit" ou "grand", ou encore "top" et "footer". Cela signifie que lorsque le site internet évolue, je n'ai pas besoin de changer les noms de fichiers en conséquence.
C’est comme nommer en CSS .big-button-red
et .top-left
. Les noms de classes en vrac sont de mauvaises pratiques. Pour donner plus de sens, j'utilise .basic
ou encore .full-feature
.
Mais où est le fun la dedans ? Pour que la force soit avec moi, j'ai décidé d'embrasser le pouvoir du coté obscur de la force comme l'explique Andy Clarke dans son article : Star wars styling. L'idée est d'utiliser la puissance des personnages de films de science fiction pour hiérarchiser ses fichiers.
filename.html — simple
filename.maul.html — moyen
filename.vador.html — complexe
filename.emperor.html — fonctionnalités supplémentaires
Cette approche à l'avantage d'utiliser une "convention" existante, que n'importe qui peut comprendre facilement. Inutile ? Sûrement. La question est de créer une convention qui fonctionne.
À la fin, il existe beaucoups de façon de nommer les fichiers. La meilleure façon de trouver son propre système est d'essayer, d'échouer, et de recommencer jusqu'à trouver ce qui vous correspond -ainsi qu'à votre équipe.
Avoir des règles de nommage peut sembler inutile. D'expérience, cela vous économisera de précieuses secondes lors de vos vos développements, qui se transforment en mois de travail arrivé à une certaine échelle.
Ce n’est pas fini
Ai-je manqué quelque chose? Le contenu n'est plus à jour? Contactez @flexbox_
Je met continuellement à jour ces guides afin d’avoir un contenu le plus précis et le plus à jour sur le Web.
Foundation 5 architecturer ses fichiers Interchange
Tweet