Organiser votre code CSS pour plus d’efficacité

Organisez votre code CSS pour accélérer votre développement, faciliter la maintenance et l’évolution de vos applications Web.

Apprenez à structurer votre code CSS en le divisant

Nous voudrions partager avec vous une stratégie pour vos applications HTML 5/CSS 3 qui va vous permettre :

D’une part de développer beaucoup plus rapidement, tout ce qui est l’ergonomie, le design de vos sites grâce aux feuilles de style CSS.

Et en plus de pouvoir corriger les erreurs d’affichage, les petits bugs qui peuvent arriver facilement et de pouvoir faire évoluer l’affichage, le design de votre site beaucoup plus simplement.

Nous rencontrons souvent des développeurs et vous êtes peut-être dans ce cas-là. Ils mettent tout le code 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 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 compatible avec tous les navigateurs, ceux des tablettes, des smartphones et également les ordinateurs de bureau. Du coup, vous ne savez plus où donner de la tête.

Et, pour faire évoluer, corriger un affichage, un bug dans votre site, c’est la croix et la bannière, et vous vous êtes peut-être retrouvé dans ce cas là, nous ça nous est déjà arrivé et, il y avait 200 lignes de code et c’est incorrigible.

Ce que nous allons partager avec vous, c’est une technique que les débutants n’utilisent pas forcément parce qu’ils n’en voient pas l’intérêt ou ne la connaissent pas.

Nous vous conseillons de créer des fichiers qui contiennent uniquement votre code CSS. Dans votre fichier HTML, vous aurez soit une balise link avec le lien vers un fichier CSS, donc plusieurs balises link avec vos liens vers vos fichiers CSS. Ou alors vous avez une sorte de fichier master CSS, vous l’incluez avec cette balise link et dans ce fichier master CSS, vous utilisez la balise import URL vers vos autres fichiers 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. Soit le haut de page, la barre latérale des widgets, le bas de page, la zone de contenu.

L’avantage c’est que vous savez rapidement où vous avez à modifier le contenu de vos CSS. Par exemple, pour modifier les couleurs des liens ou les mettre en gras, les souligner, etc. Vous savez directement dans quel fichier taper, quel fichier 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.

Vous allez gagner un temps de développement énorme pour concevoir le design graphique, l’ergonomie de votre site Internet et pour faire évoluer l’ergonomie de votre site Internet. Trois mois après, quand vous revenez sur votre site Internet, vous savez directement quel fichier CSS est à modifier, à améliorer pour effectuer les modifications graphiques demandées.

Pensez également à organiser vos fichiers CSS dans des répertoires. Vous pouvez avoir 3 fichiers CSS différents, surtout si vous avez des pop-up etc. Organisez vos fichiers CSS dans des répertoires, ce sera beaucoup plus simple pour les retrouver, pour retrouver le code concerné et mettre en place des améliorations du code CSS.

En utilisant cette technique d’inclusion de fichiers CSS et l’organisation par thème (le code CSS dans un fichier qui gère le pied de page ou le haut de page dans un répertoire dédié), 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.

C’est très très important d’utiliser cette stratégie de développement !

Exemple d’ application

<head>
<meta charset="UTF-8">

<!-- Importation de CSS externes -->
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css">
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Nos CSS -->
<link rel="stylesheet" type="text/css" href="d4f-design2020.css"/>

</head>

Ou bien, voici des importations d’autres CSS :

@import "barre_laterale.css";
@import "pied_de_page.css";
@import "menu.css";

Conclusion

Utilisez des fichiers CSS pour inclure votre code, plutôt que de le répéter dans chaque page. Structurez-le en faisant plusieurs fichiers et importez-les dès que vous en avez besoin, que ce soit dans votre page ou dans un autre fichier CSS.

La maintenance et l’évolutivité n’en seront que plus faciles.

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