
Deux stratégies pour simplifier votre développement CSS 3
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ûres, vous offrant une meilleur maintenabilité, ainsi qu’une plus grande facilité d’évolution.
Ces techniques vont également vous permettre de travailler en équipe sur un projet.
Souvent, nous rencontrons des développeurs qui se posent des questions. Comment ajouter telle fonctionnalité ? Un bouton animé ? Tel élément sur mon site web ?
Ils ont un grand pavé de code CSS qui fait 100 lignes. Vous êtes, vous aussi, peut-être dans ce cas-là.
Quand vous codez tout dans le même fichier CSS, il fait rapidement 100 ou 200 lignes. Il n’y a aucune architecture. Et il devient très difficile de rajouter des nouvelles fonctionnalités CSS pour l’ergonomie de votre site.
Nous allons 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. 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 pour le CSS, que nous avons déjà partagé dans les articles précédents, c’est l’inclusion de fichiers, l’import de fichiers CSS, de créer des répertoires et les fichiers CSS qui vont dedans, nous vous renvoyons donc aux articles précédents pour ce point là.
Il y a une autre stratégie que je souhaite partager avec vous, elle va vous aider dans votre développement CSS, surtout si vous êtes dans le cas où justement vous avez trop de code CSS, vous ne savez plus 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
(c’est le point qui fait que vous déclarez une classe) et cela va vous permette de définir la couleur par exemple.
Vous définissez la classe carrousel, la classe diaporama. Et tous les diaporamas qui sont présents dans votre site, seront déclarés avec <div class="diaporama"
></div>, ils auront le même design graphique. Cela va vous éviter de répéter le code, comme dans le cas où 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 que vous aurez plusieurs fois dans la page, et ils seront tous identiques graphiquement. Si demain, ou dans un mois, deux mois, vous devez faire une évolution de la présentation, vous n’aurez qu’un seul endroit où changer le code, et automatiquement tous les éléments utilisant cette classe vont être mis à jour.
Vous avez les attributs, avec les identifiants. 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 se ressemblent, mais qui sont différents en présentation, vous avez un autre identifiant, ces identifiants sont uniques.
Vous créez un code CSS par identifiant, #boutonValiderCommande
, que vous utilisez avec <div id="boutonValiderCommande"></div>
. Vous avez votre bouton créé, il n’y en a qu’un seul dans une page Web de ce type-là.
Pour chaque page, vous pouvez réutiliser cet identifiant boutonValiderCommande
, dans toutes les pages où il y a un bouton Commande, il sera toujours identique.
Première stratégie, créez plusieurs fichiers CSS : importez-les, organisez vos fichiers CSS dans des répertoires.
Deuxième stratégie très importante : utilisez déjà l’existant du code CSS, du langage CSS avec les classes, les attributs, cela va vous éviter de vous retrouver avec 100, 200 lignes de code CSS. Apprenez à optimiser votre code CSS en évitant les répétitions.
Si vous êtes dans ce cas-là, utilisez les classes, les attributs CSS. Pensez à créer plusieurs fichiers CSS. En fonction de la page, il n’y a pas besoin d’inclure tous les fichiers CSS. Votre site se charge ainsi beaucoup plus rapidement. En fonction de la page, vous avez peut-être besoin que de cinq fichiers CSS, dans d’autres pages dix ou quinze fichiers CSS.
Toutes ces optimisations vont vous permettre d’accélérer l’affichage des pages de votre site Web.
Deuxièmement, vous saurez plus facilement dans quel fichier CSS rajouter, ou modifier pour 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 peut très bien travailler sur votre projet et rajouter les nouvelles fonctionnalités.
Trois avantages énormes que vous apportent l’organisation de votre code CSS, d’utiliser les classes et les attributs. Et voici une dernière technique que nous avons envie de partager avec vous.
Utilisez des frameworks !
Si vous codez des applications Web de plus en plus imposantes avec beaucoup de fonctionnalités. Regardez du côté des frameworks CSS. Nous pensons notamment au framework BootStrap 4.
Plutôt que de recoder les boutons, le code CSS, des boutons, diaporama etc. BootStrap 4 vous propose tout ça. Il a déjà un code optimisé, il est compatible avec la majorité des navigateurs. Votre site s’affichera aussi bien sur tablette que sur un smartphone ou sur un ordinateur de bureau.
Maintenant c’est à vous de jouer, à votre tour de passer à la vitesse supérieure dans le développement avec le langage CSS.
Voila, vous pouvez maintenant briller en soirée …
Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/tous-les-cours
Ici le parcours complet pour devenir développeur web : https://www.develop4fun.fr/parcours-developpeur-web-cours-en-ligne
Vous pouvez également nous retrouver sur Youtube :
Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q
Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA
Étiquette :CSS, CSS 3, CSS3, fichier CSS, inclusion de fichiers, style d'une balise, Tuto CSS 3