Comment faciliter la maintenance de votre code grâce aux guides de style de vie

Les guides de style d'antan sont généralement considérés comme des documents axés sur le design, axés sur la stratégie de marque et l'utilisation de la couleur. Mais avec l'avènement de bases de données incroyablement volumineuses pour des sites comme Facebook ou la vaste gamme de produits de Google, les guides de style ont évolué depuis.

Ces jours-ci, les guides de style de vie contiennent toujours une documentation à jour sur la base de code actuelle et ses cas d'utilisation. Avec ces documents, nous pouvons écrire du code beaucoup plus facile à entretenir et réutilisable tout en observant instantanément l’optimisation de notre base de code.

Qu'est-ce qu'un guide de style de vie?

Les guides de style de vie sont similaires aux guides plus anciens; ils contiennent des informations sur le logo et la marque, l'utilisation de la couleur, ainsi qu'un aperçu général de l'utilisation du code. La section Contour de code est l'endroit où vous pouvez facilement trouver du code en double ou similaire et le combiner pour optimiser votre base de code ou afficher les composants déjà utilisés. La plupart des guides présentent une approche de type "log" dans laquelle chaque instance de code est documentée ou seul le code intentionnellement modulaire est documenté.

Ces guides se concentrent non seulement sur le HTML et le CSS, mais également sur d’autres langages pouvant être modularisés pour des performances telles que JavaScript et PHP. Quelques exemples solides de guides de style de vie peuvent être trouvés à Github , Mozilla , et MailChimp . Comme vous pouvez le voir dans ces exemples, il est courant d’avoir une page ou un sous-site pour afficher les cas d’utilisation à côté du code de chaque composant. Cela facilite la tâche de les récupérer lorsque vous en avez besoin et permet aux concepteurs ou développeurs peu familiers de voir comment les composants fonctionnent de manière interactive.

Commencer votre propre guide de style de vie

Commencer à zéro votre propre guide de style de vie peut sembler intimidant, en particulier pour les grands projets. Mais généralement, il faut rentabiliser l’investissement nécessaire pour le faire. Les projets plus importants bénéficient énormément d'une documentation vivante sur les styles de site et la structure du code. Les projets de moindre envergure ont un retour sur investissement moins visible, mais parfois toujours utile. Dans un cas comme dans l’autre, si vous travaillez sur un projet qui pourrait un jour être transféré à un autre concepteur ou développeur, il sera possible de consulter cette documentation.

Commence avec la fondation

Les composants que vous utilisez fréquemment sont le meilleur exemple d'utilisation d'un guide de style de vie, les boutons vous viennent immédiatement à l'esprit. Une courte liste de choses que vous pouvez envisager de documenter sont les options de mise en page (décrivant éventuellement un système de grille), la typographie, l'utilisation des couleurs, les boutons et les styles de liens, le style des formulaires, les notifications ou les alertes. À peu près tout ce qui pourrait être réutilisable pourrait être ajouté essentiellement. Lorsque vous décrivez, n'oubliez pas de garder les choses flexibles. Ne jamais styliser une alerte ou un bouton spécifique à une page ou à un cas d'utilisation, sauf en cas d'absolue nécessité. Au lieu de cela, ajoutez des classes de modificateurs pour utiliser les bases de la couleur, de la typographie ou des modifications esthétiques. De cette façon, vous pouvez toujours compter sur la classe .button pour désigner une largeur, une hauteur et une taille de texte cohérentes tout en permettant aux classes de modificateurs de modifier certaines choses pour chaque cas d'utilisation.

Les objectifs du code maintenable

Le code maintenable a pour but de rendre les choses réutilisables et à l'épreuve du temps. Des composants tels que les barres de notification, les boutons, les en-têtes et les pieds de page sont d'excellents exemples de code réutilisable: les éléments que vous pouvez utiliser plusieurs fois sur le site ou sur la même page. Si vous brisez le code ancien ou déjà écrit pour le rendre plus facile à maintenir après coup, il est en fait assez simple. Commencez par enlever le CSS aux bases. Vous devez avoir une classe de composant définissant des éléments structurels tels que la hauteur, la largeur et la position. Bien que des classes de modificateurs supplémentaires puissent être utilisées pour modifier des éléments esthétiques tels que la couleur ou la typographie. De plus, si votre projet utilise un identifiant ou une classe de corps pour chaque page, vous pouvez définir des styles d'utilisation uniques pour chaque page. Veillez à ne pas trop recourir à cette pratique, car elle peut facilement ajouter du poids à votre guide de style.

le Principe KISS est également un principe de conception adapté au processus de développement modulaire. L'écriture de code simple et maintenable est généralement plus facile en gardant vos composants simples. En matière de simplicité, s'il est possible de rendre les choses plus efficaces et / ou d'utiliser moins de code tout en obtenant le même résultat, nos composants doivent être écrits pour le faire. L’objectif final d’une structure de code maintenable est d’avoir quelque chose de réutilisable, de petit et d’énormément plus efficace qu’un équivalent non maintenable.

Conventions de nommage en CSS

Quand il s'agit de travailler avec une structure de code maintenable, les conventions de nommage deviennent très importantes. Écrire des classes CSS descriptives facilitera grandement la maintenance de votre base de code. Il y a sans limites sur les longueurs de classe CSS, utilisez-le à votre avantage. Assurez-vous de respecter une convention de dénomination claire, car mélanger les tirets par rapport aux traits de soulignement ou à la casse de chameau par rapport à tous les noms de minuscules peut facilement être source de confusion. C'est généralement une bonne idée de rendre vos classes de composants très descriptives, tout en réduisant les classes de modificateurs. Vous trouverez ci-dessous un exemple de bouton, une règle de cas d'utilisation unique et des classes de modificateur.

  / * Ceci est une classe de composants, elle ne devrait contenir que des règles structurelles de base * /. Button {display: block; width: 250px; height: 48px; line-height: 48px;} / * Ce cas d'utilisation unique décrit un bouton utilisé sur la page d'accueil * /. homepage-cta-button {display: blockmargin: 0 auto 50px; largeur: 180px; hauteur: 60px; hauteur de ligne: 60px;} / * Ci-dessous les classes de modificateurs, elles sont ajoutées en plus du composant classe pour ajouter de la couleur ou d'autres changements esthétiques * /. red {background: # C54F48} .rounded {border-radius: 5px;} 

Solutions automatisées

Des générateurs de guide de style automatisés ont commencé à apparaître à gauche et à droite pour faciliter la recherche de guides de style. Prototype de style est un générateur SASS construit par Ram Richard et Mason Wendell de Equipe SASS . C’est l’une des meilleures options pour le moment, avec des générateurs similaires comme Hologramme , Kalei , StyleDocco , et KSS également utile.

Automatisé vs artisanal

Comme toujours, il y a des avantages et des inconvénients à utiliser l'une ou l'autre méthode ici. Les solutions automatisées sont rapides et peuvent être utilisées après coup, mais elles sont aussi parfois strictes. Les guides de style artisanal vous permettent de tout savoir, mais prenez plus de temps. Personnellement, l'approche personnalisée est la meilleure pour moi dans la plupart des cas, car elle est la plus flexible en termes de collaboration avec d'autres développeurs. Mais cela vaut certainement la peine d'essayer certaines solutions automatisées, juste pour avoir une idée de leur fonctionnement et de ce qu'elles disent de votre code.

Révision de votre code

Les sites Web ne sont jamais terminés. Nous modifions les choses, la transition vers de nouveaux styles et de nouvelles tendances, et au final, nous pouvons nous retrouver avec beaucoup de code des révisions passées. Il est important de prendre un moment et de regarder la fin de chaque révision pour s’assurer que les choses sont aussi propres que possible. A ce stade, j'aime aussi lancer chaque composant (et classes de modificateurs) dans un Codepen pour tester le support du navigateur et prendre des notes en conséquence. Cela pourrait vous faire économiser beaucoup de temps si vous concevez une page avec des contraintes de support. Lors de la révision, veillez également à garder un œil sur les composants qui peuvent entrer en conflit les uns avec les autres de manière étrange ou provoquer des problèmes de modèle de boîte.

Conclusion

En conclusion, les guides de style devraient aboutir à un code très manipulateur et flexible, tout en restant facile à gérer et à lire. Considérant combien de temps nous devons investir pour atteindre un tel résultat, les guides de style de vie ont un effet beaucoup plus quantifiable sur les projets plus importants que les plus petits. Les projets complexes ou de grande envergure bénéficient autant de l’optimisation et de la performance qu’ils valent bien le temps passé à atteindre ces résultats. Créer un guide de style de vie pour un petit site Web ou un projet peut ne pas s'avérer digne de l'investissement dans le temps.

En conclusion, nous devrions tous nous efforcer d’écrire un code propre et facile à entretenir, axé sur la pérennité. Les guides de style de vie ont tendance à encourager un tel flux de travail et à aider les développeurs et les téléspectateurs à être plus heureux.

Image / vignette en vedette, image de programmation via Shutterstock.