Découvrez deux stratégies très importantes, deux stratégies piliers pour votre développement avec le langage CSS.
Vos applications Web seront plus sûr, vous offrant une meilleur maintenabilité, ainsi plus qu’une plus grande facilité d’évolution.
Ces techniques vont également vous permettre de travailler en équipe sur un projet.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Les 2 stratégies essentielles pour simplifier votre développement avec CSS3
Bonjour à tous et bienvenu sur Développement Facile.
Ici Matthieu, expert en développement applicatif, et aujourd’hui je voulais partager avec vous, deux stratégie très importantes, des piliers pour votre développement avec le langage CSS. Souvent je rencontre des développeurs qui me posent des questions souvent par mail par les commentaires, souvent par mail, ils disent, Matthieu, voici mon code CSS, déjà c’est un grand pavé qui fait 100 lignes, et comment ajouter telle fonctionnalité, un bouton, animer tel élément sur mon site web, vous êtes peut-être dans ce cas-là, quand vous codez tout dans le même fichier CSS, ça fait 100 ou 200 lignes, il n’y a pas d’architecture, c’est très difficile justement, de rajouter des nouvelles fonctionnalités CSS pour l’ergonomie de votre site derrière.
Justement je vais partager avec vous deux stratégies avancées, piliers, la base que vous devez mettre en place tout de suite dans votre développement CSS, pour créer un code CSS qui soit optimisé, déjà, compatible avec la majorité des navigateurs, compatible avec les tablettes, les Smartphones, les ordinateurs de bureau, et le plus réduit possible, ça n’a pas besoin de mettre du code CSS en double, quand vous pouvez le combiner en un seul morceau de code CSS.
Déjà, une des premières stratégies à mettre en place, que j’ai déjà partagée dans une des vidéos précédentes, c’est l’inclusion de fichiers, l’import de fichiers CSS, de créer des répertoires, et les fichiers CSS qui vont bien dedans, je vous renvoie à la vidéo précédente pour cette partie-là, et il y a une autre stratégie que je souhaite partager avec vous, ça va vous aider dans votre développement CSS, surtout si vous êtes peut-être dans le cas où justement trop de code CSS, vous ne savez pas trop où mettre le code, comment modifier tel élément, comment l’animer, il suffit d’utiliser les fonctionnalités existantes de CSS.
Par exemple vous avez les classes, les attributs, une sorte de classe CSS, vous pouvez créer une classe CSS, c’est ce que j’appelle des classes CSS, avec l’identifiant .quelque chose et ça va vous permette de définir la couleur par exemple, vous définissez la classe carrousel, la classe diaporama, et tous les diaporama qui sont présents dans votre site, div class = diaporama, ils auront le même design graphique, ça va vous éviter de répéter le code, si vous utilisez les identifiants il faudrait faire #carroussel1, #carroussel2 etc. Si vous avez cinq diaporamas dans votre page, vous aurez cinq fois le code répété, du coup vous arriverez vite à 200 lignes de code CSS.
Utilisez les classes CSS, si vous savez que vous allez créer des éléments, vous en aurez plusieurs dans la page mais ils seront tous identiques graphiquement, il est temps d’utiliser, au lieu de de créer plusieurs morceaux de code CSS pour chaque élément, vous créez un seul morceau de code pour gérer tous ces éléments et à chaque fois vous faite divclasse=le nom de votre classe diaporama et quand vous créez 5, 6 diaporamas dans la page, vous appelez à chaque fois la même classe, et si demain vous devez, ou dans un mois, deux mois, faire une évolution de la présentation, vous avez un seul endroit à changer le code, ce sera dans votre classe diaporama et automatiquement les 5, 6 diaporamas vont être mis à jour. Et d’un autre côté vous avez les attributs, avec les identifiants ça fonctionne, vous définissez des identifiants, ça c’est pour un élément qui est unique dans votre présentation CSS, et s’il y a d’autres éléments qui ressemblent, mais ils sont différents en présentation, vous avez un autre identifiant, c’est des identifiants uniques, il n’y en a qu’un seul qui s’appelle comme ça, là vous créez un code CSS par identifiant, #bouton valider, bouton valider commande avec votre code CSS et là vous faites classe div, votre div, id= bouton valider commande, et vous avez votre bouton qui est créé, le bouton commande il n’y en a qu’un seul dans une page Web possible de ce type-là, et à chaque fois, vous pouvez réutiliser cet identifiant bouton valider commande, donc #bouton valider commande avec div=id bouton valider commande, dans toutes les pages il y a un bouton commande, et il sera toujours identique.
Vraiment première stratégie, créez plusieurs fichiers CSS, importez-les, organisez vos fichiers CSS dans des répertoires et deuxième stratégie très importante, utilisez déjà l’existant du code CSS, du langage CSS avec les classes, les attributs, ça va vous éviter, comme j’ai commencé à mes débuts où j’avais, je ne sais pas, 100, 200 lignes de code CSS, quand je débutais, et en fait j’aurais très bien pu diviser par deux ou trois le nombre de lignes de code CSS si j’avais connu, su, optimiser mon code CSS en évitant les répétitions. Si vous êtes dans ce cas-là, justement, utilisez les classes, les attributs CSS, pensez à créer plusieurs fichiers CSS, suivant la page il n’y a pas besoin d’inclure les fichiers CSS, du coup votre site se charge beaucoup plus rapidement, en fonction de la page, vous avez peut-être besoin que de cinq fichiers CSS, dans d’autres pages dix, quinze fichiers CSS. Tout ça, ça va permettre d’accélérer l’affichage des pages de votre site Web donc de les accélérer énormément, deuxièmement, vous saurez très facilement, plus ou moins facilement suivant ce qu’on vous demande ergonomiquement, mais en tout cas vous saurez quel fichier CSS rajouter, l’animation, le code, la modification de la couleur, les effets d’ombres etc. demandés, et troisièmement vous pourrez travailler en équipe parce qu’avec du code bien architecturé, bien organisé, un autre développeur peu très bien travailler sur votre projet et rajouter les nouvelles fonctionnalités.
Trois avantages énormes que ça vous apporte d’organiser votre code CSS, d’utiliser les classes, les attributs et également une dernière technique que j’ai envie de partager avec vous. C’est d’utiliser des Framework, si vous codez des applications Web de plus en plus imposante avec beaucoup de fonctionnalités, regardez il y a des Framework CSS, je pense notamment au framework BookStrap3, il y a également des cours gratuits, justement, sur Développement Facile pour apprendre le potentiel à utiliser le framework BookStrap3.
Plutôt que de recoder les boutons, le code CSS, des boutons, diaporama etc. BookStrap3 vous propose tout ça, il a déjà un code optimisé, c’est compatible avec la majorité des navigateurs, votre site s’affichera aussi bien sur tablette que sur smartphone que sur ordinateur de bureau, regardez les cours du framework BookStrap 3.
Je vous montre un petit exemple de code source vraiment très rapidement, juste pour que vous voyez à quoi ça ressemble. Là, pour organiser votre code CSS c’est le même principe, vous avez plusieurs répertoires avec votre code CSS pour la gestion des articles, la gestion du site, la gestion des animations flash, donc c’est du code CSS classique pour gérer les liens, ça permettait d’importer du CSS dans flash ActionScript, très pratique, là tout ce qui est gestion du site, tout simplement, et vous organisez votre code CSS dans des répertoires en les nommant précisément et après vous avez un fichier header. PHP pour construire votre page d’accueil, toutes vos pages HTML, qui inclue les fichiers CSS, donc en fonction du template, si vous avez plusieurs templates, bien vous pouvez très facilement, en changent juste le nom du répertoire défaut, par exemple démo3, et bien changer d’affichage de style CSS très facilement. Une petite technique que je vous donne au passage pour la gestion du cache, vous pouvez utiliser un nombre aléatoire random, et ça va vous permettre de gérer le cache, ne plus avoir de problème de cache CSS, ça va forcer le navigateur de votre internaute à recharger le fichier CSS à chaque fois. Ça c’est une astuce très pratique que vous pouvez utiliser et donc voilà vous incluez tous vos fichiers CSS dont vous avez besoin, la même chose avec les fichiers JavaScript dont vous avez besoin, et du coup votre code vous savez pour modifier les articles, c’est article.css, pour modifier le thème Mac OS c’est ici, le site, site.css, pour trouver directement les fichiers concernés à modifier, du coup vous pouvez travailler à plusieurs sur le même projet, ça vous fait un gain de temps énorme pour réaliser vos projets, vous pouvez corriger et ajouter des nouvelles fonctionnalités d’interface, d’affichage, en CSS beaucoup plus facilement car vous savez directement où est stocké le bout de code CSS à modifier donc ça représente que des avantages, je vous encouragent à le mettre en pratique dès maintenant.
Maintenant c’est à vous de jouer, à vous de passer à la vitesse supérieure dans le développement avec le langage CSS, juste au-dessus de cette vidéo il y a une image, lancer la vidéo 2 maintenant ou alors cette vidéo va se transformer en lien cliquable, à la fin de cette vidéo vous avez juste à cliquer dessus, vous serez rédigerez dans la deuxième vidéo, et dans la deuxième vidéo vous allez beaucoup plus loin dans votre développement CSS, HTML 5, donc CSS 3, HTML 5 ça va vraiment ensemble, c’est en synergie, c’est deux langages de programmation, vous allez apprendre à utiliser toutes les nouveautés de CSS 3, les nouvelles possibilités offertes par le langage HTML 5, vous allez utiliser de fond en comble le framework BookStrap 3 pour simplifier votre développement, tout ça se passe dans la deuxième vidéo, vous allez vraiment faire un bond en avant dans le développement de vos sites, qui soient compatibles Smartphone, tablette, ordinateur de bureau, qui s’affichent correctement comme vous le souhaitez, qui s’adaptent automatiquement en fonction de la résolution d’écran de votre visiteur, et suivant le navigateur qui reste, qu’il n’ ait pas de petit bug d’affichage, qui s’affiche correctement quel que soit le navigateur donc je vous invite à cliquer sur cette vidéo, et on se retrouve à tout de suite dans la deuxième vidéo.
[/ppmtoggle][/ppmaccordion]
Exemple de code vu dans la vidéo
Et voici le code source de l’application présentée en exemple dans le cours.
Téléchargement du code source Exemple de site réalisé avec du CSS
