Organisez votre code CSS pour accélérer votre développement, facilitez la maintenance et l’évolution de vos applications Web.
Apprenez à structurer votre code CSS, en le divisant.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment organiser votre code CSS pour plus d’efficacité
Bonjour à tous et bienvenu sur développement facile ici Matthieu expert en développement applicatif.
Et aujourd’hui je voudrais partager avec vous une stratégie pour vos applications HTML 5, CSS 3 qui va vous permettre déjà d’une part de développer beaucoup plus rapidement, tous ce qui est l’ergonomie, le design de vos sites grâce à CSS, aux feuilles de style et en plus de pouvoir corriger les erreurs d’affichage les petits bugs qui peuvent arriver beaucoup plus facilement et de pouvoir faire évoluer l’affichage, le design de votre site beaucoup plus simplement.
Souvent je rencontre des développeurs et vous êtes peut-être dans ce cas-là, ils mettent tous le codes des feuilles de style donc le code CSS dans la page HTML. Du coup déjà il faut le mettre à chaque fois dans chaque page HTML, PHP d’une part et en plus vous avez un pavé, le code CSS ça peut aller très, très, vite en nombre de lignes. Vous pouvez avoir très facilement de 100 à 200 lignes CSS, surtout si vous voulez que votre site soit compatibles avec tous les navigateurs, ceux des tablettes, des Smartphones et également les ordinateurs de bureau. Donc du coup, vous ne savez plus où donner de la tête et là, pour faire évoluer, corriger un affichage, un bug d’affichage dans votre site, c’est la croix et la bannière, et vous vous êtes peut être retrouvé dans ce cas là, moi ça m’ai déjà arrivé et la du coup il y avait 200 lignes de codes et c’est incorrigible.
Donc ce que je vais partager avec vous, c’est une technique que les débutants n’utilisent pas forcément parce qu’on en voit pas l’intérêt ou on la connaît pas. Donc en fait, moi je vous conseille de créer des fichiers qui contiennent uniquement votre code CSS. Dans votre fichiers HTML vous aurez en fait un … vous pouvez le faire de 2 façons différentes. C’est-à-dire, soit une balise link avec le lien vers vos fichiers CSS, donc plusieurs balises link avec vos liens vers vos fichiers CSS, ça c’est dans votre fichier HTML ou alors vous avez une sorte de fichier master CSS, donc vous l’incluez avec cette balise link et dans ce fichier master CSS vous utilisez la balise import URL vers votre fichier CSS. Un fichier CSS peut inclure d’autres fichiers CSS. Quel est l’objectif me direz-vous ? L’objectif c’est que vous allez créer plusieurs fichiers CSS par exemple un fichier CSS pour gérer le style du header, un fichier CSS pour gérer le style du pied de page, un fichier CSS pour gérer la barre latérale, un autre fichier CSS pour gérer le contenu de vos articles. Vous allez créer plusieurs fichiers CSS avec uniquement le design de la partie du site dont il s’occupe. Donc soit le haut de page, la barre latérale des widgets, le bas de page, la zone de contenu. Ça fait que vous avez deux solutions pour les importer, soit vous importer un fichier Master dans votre fichier HTML avec la balise link, et le lien vers votre fichier CSS ou soit … et après dans le fichier master vous faîtes des import URL vers vos fichiers CSS plusieurs import URL, URL ça va appeler le header, le footer etc. etc. et comme ça, l’avantage c’est que vous savez si vous avez le contenu à changer de CSS, le contenu par exemple les couleurs des liens les mettre en gras les souligner, etc. vous savez directement quel fichier taper, aller chercher. Si vous avez un problème d’affichage sur la barre latérale vous allez directement dans le fichier CSS avec ce problème d’affichage. Donc vous allez avoir un gain de temps énorme pour concevoir le design graphique, l’ergonomie de votre site Internet déjà pour faire évoluer l’ergonomie de votre site Internet et l’avantage c’est que trois mois après quand vous revenez sur votre site Internet vous savez directement quel fichier CSS sont à modifier, à améliorer pour effectuer les modifications graphiques demandées. Pensez également à organiser vos fichiers CSS dans des répertoires. Des fois pour le contenu vous pouvez avoir 3 fichiers CSS différents surtout si vous avez des pop-up etc. Donc organisez vos fichiers CSS dans des répertoires, ce sera beaucoup plus simple pour les retrouver, pour retrouver le code concerner et faire les améliorations.
En utilisant cette technique d’inclusion de fichier CSS et de les organiser par thème donc le code CSS dans un fichier qui gère par exemple le pied de page ou le haut de page dans un répertoire dédié, par exemple vous allez créer des répertoires template, template1 pour le premier design de votre site, template2, v2 du design de votre site etc. etc. Vous allez gagner un temps phénoménal sur le développement de votre site, la maintenance du code CSS et les évolutions du code CSS. Donc c’est très très important de faire ça.
Je vous montre tout de suite, un exemple de code source comme ça ce sera plus parlent pour voir un petit peu ce que ça donne.
Alors un exemple de code source ou justement on inclut tout le code CSS dans un fichier par exemple lorsque vous utilisez un Framework donc le Framework BootStrap 3 .css, vous utilisez la balise link, que je vous ai expliqué, vous dites que c’est une feuille de style et href c’est le lien vers votre fichier CSS tout simplement. Et donc si vous regardez le fichiers CSS il a cette forme là en fait et vous pouvez très bien dans ce fichier CSS faire des import d’autres fichiers CSS ou alors comme c’est le cas ici faire appel à des polices de caractères qui sont dans des fichiers CSS. Là en l’occurrence c’est des fichiers eot, là, vous faites appel … y’a tout une ligne de fichier svg, de police directement dans le CSS ou vous pouvez comme je vous l’ai dit appeler d’autres fichiers CSS dans le CSS mais c’est pas tout vous avez votre fichier CSS bootstrap 3 qui est ici, vous pouvez appeler un autre fichier CSS quand je vous ai dit de mettre votre code CSS dans différents fichiers en fonction de la zone dont vous faites la mise en forme, là, vous avez le Framework awesome pareil avec la même balise link où on fait appel aux fonctionnalités de ce Framework et après vous pouvez avoir très bien un petit peu de codes CSS dans le fichier HTML comme j’ai mis là pour personnaliser la page comme je vais vous montrer tout à l’heure vous verrez que c’est un diaporama donc là où je m’occupe du footer, du corps, du body quoi … du corps de la page HTML 5 , je veux une police Arial en taille 12 avec un espace en haut de 70 pixels et, là, c’est pour configurer le diaporama. Donc vous pouvez très bien combiner les deux mettre un petit peu de style CSS pour la page en question, là pour la page en question parce que justement j’ai un diaporama et le reste dans des fichiers CSS où vous faites des link ou des import à l’intérieur d’un fichier CSS qui importe d’autres fichiers CSS et vous pouvez combiner bien évidemment en faisant des import de fichiers JavaScript donc, il y a un cours qui est dédié à l’inclusion de fichiers JavaScript comment organiser vos fichiers JavaScript donc il suffira d’aller le consulter sur développement facile. Et pareil, vous pouvez intégrer du code JavaScript également.
Et voici le résultat justement de l’inclusion de ce fichier CSS et du fichier JavaScript, c’est tout simplement un diaporama de photos avec une description le type de la photo et un lien tout simplement. Donc c’est un va pas dire un bête diaporama, mais un diaporama très sympa où on peut sélectionner, faire Play pour un défilement automatique des photos pause lorsqu’on le souhaite et tout ça en incluant un fichier CSS qui lui-même va inclure par exemple des polices de caractères, d’autres fichiers CSS en incluant un fichier JavaScript qui fait appel à plusieurs classes, fonction JavaScript et ça permet d’avoir diaporama très sympa avec du code HTML uniquement avec que des balises HTML, HTML 5 et avec un tout petit peu de code JavaScript dans le code source un petit peu de codes CSS dans le code source directement de la page HTML.
Votre plan d’action !
Donc maintenant c’est à vous de jouer donc vous retrouverez sous ce cours vidéo le code source à télécharger comme d’habitude. Si vous avez des questions posez-les directement sous cette vidéo et maintenant je vous invite à regarder la deuxième vidéo c’est-à-dire dans la deuxième vidéo vous allez aller beaucoup plus loin que ce soit avec le développement HTML 5 ou avec le développement CSS 3. C’est-à-dire qu’en fait vous allez apprendre des outils, des stratégies pour développer vos sites avec les nouvelles fonctionnalités donc vous allez connaître les nouveautés HTML 5, les nouveautés CSS 3 pour justement rendre vos sites compatibles avec la majorité des navigateurs mais aussi qui s’affiche correctement sur les tablettes, sur les Smartphones sur les ordinateurs de bureau tout ça avec le même code, le code qui s’adapte, l’affichage de votre site qui s’adapte automatiquement en fonction de la taille de la résolution de l’écran du périphérique de votre internaute donc tout ça vous allez l’apprendre dans la prochaine vidéo, vous allez connaître également, apprendre à utiliser le framework BootStrap 3 qui va vraiment littéralement simplifier et accélérer votre développement. Il est génial ce framework. Donc vous allez découvrir dans le détail pour créer beaucoup plus rapidement des sites HTML 5, CSS 3, en utilisant les dernières nouveautés qui sont sorties en HTML 5 pour les formulaires notamment, tous les nouveaux champs formulaire CSS 3, pour faire des petits animations CSS 3, des bouton etc. etc. donc je vous donne rendez-vous dans la deuxième vidéo et je vous dis justement à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Téléchargez l’exemple de la vidéo
Retrouvez le code source commenté du diaporama vu dans la vidéo
Téléchargement du code source Exemple de diaporama
