Comment structurer son code CSS pour une meilleure organisation

Structurer son code CSS
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription

89,00€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
4,5
89,00€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les principaux objectifs de cette vidéo sont :
1. Apprendre à structurer un fichier CSS.
2. Comprendre l'importance des commentaires CSS pour l'organisation.
3. Savoir comment diviser le CSS en styles globaux et de mise en page.

Découvrez les meilleures pratiques pour structurer votre code CSS de manière optimale.

Lorsque vous créez le code CSS de votre site web, il est essentiel de le structurer efficacement. Cette leçon vous guide à travers les étapes de structuration du fichier CSS, en commençant par le codage du haut vers le bas de votre page HTML, puis en séparant le fichier CSS en différentes sections. La première partie se consacre aux styles globaux, incluant les styles pour le body, les titres, les polices, les liens, les formulaires, les tableaux et les boutons. La seconde partie aborde la layout du site, avec des styles spécifiques pour le header, la navigation, le contenu principal, les aside et le pied de page. Apprenez également à utiliser les commentaires CSS et les fonctions de recherche de votre éditeur de texte comme Sublime Text pour naviguer facilement dans votre code.

Voir plus
Questions réponses
Pourquoi est-il important de structurer son code CSS?
Structurer son code CSS permet de le rendre plus lisible et facile à maintenir à long terme.
Comment nommer la section globale dans un fichier CSS?
Vous pouvez nommer la section globale en utilisant un commentaire intitulé 'global'.
Quel est l'avantage d'utiliser des commentaires dans le fichier CSS?
Les commentaires aident à organiser le code et facilitent la navigation entre les différentes sections.
Lorsque vous créez le code css de votre site web, il est aussi important de le structurer de la bonne manière, c'est à dire de coder votre page html du haut vers le bas, donc de coder son code css du haut vers le bas déjà. Mais il est important aussi de séparer votre fichier css en plusieurs parties, c'est à dire que nous allons créer une première partie qui va être la partie globale, donc tous les styles généraux de votre mise en page, c'est à dire tout ce qui va être mis en forme pour la base body, tout ce qui va être niveau de titre, la taille des polices à caractère pour la typo, pour les liens, pour les formulaires et c'est une partie donc qui est générale comme si vous ouvriez Word et que vous avez une feuille de style par défaut pour travailler. Là nous allons faire la même chose et dans la deuxième partie de ce code css là nous aurons vraiment la mise en page du site qui commence. Donc pour ce faire je vous invite à créer un grand commentaire css pour commencer où on va donc le titrer global. Donc ici moi en général j'ouvre un commentaire et je mets des tirés, vous pouvez le dupliquer en mettant un deuxième commentaire à l'intérieur et vous saisissez global. Dans cette partie globale nous allons mettre d'autres instructions mais nous pouvons d'ores et déjà dupliquer ce commentaire et en dessous nous écrirons les instructions spécifiques à la mise en page du site web. Pour pouvoir faire des sous-parties nous allons faire des commentaires plus petits. C'est à dire que là par exemple nous mettrons tous les styles qui se rapportent à la typographie. C'est comme si nous faisions des chapitres et des sous-chapitres, ça n'a aucune incidence particulière sur la mise en forme du site comme vous le comprenez j'imagine bien. Ici nous allons donc saisir les instructions pour la typographie, ici vous pouvez mettre un deuxième commentaire où nous mettrons des instructions pour d'autres balises plutôt génériques, ici nous mettrons les instructions pour styler les liens du site web, ici nous mettrons tout ce qui est relatif au formulaire et ici nous mettrons les tableaux et ici nous mettrons les boutons. Voyez ce sont des choses plutôt génériques qu'on a tout le temps besoin dans la mise en page d'un site web. Dans la partie layout, là spécifiquement nous allons prendre la structure de la page web donc en général dans un site web on aura au moins un header, vous aurez une navigation donc partie où nous allons styler la navigation. Colons encore un commentaire puisque après nous aurons la partie principale de la page où nous stylerons les aimants qui sont dans le main du document, puis nous aurons la partie aside et la partie pied de page. Voilà, là nous retrouvons à peu près les grands éléments structurants d'une future mise en page de site web et notre code css, en tout cas la présentation de ce code css est plutôt facile et compréhensible à lire. Sur le côté vous avez la vue miniature aussi dans Sublime Text qui vous permet d'accéder facilement à chaque partie de la page et vous avez pour terminer une autre chose qui est intéressante c'est find, c'est à dire la fonction de recherche de Sublime Text. Maintenant que vous avez bien structuré vos commentaires si vous voulez aller dans la partie par exemple layout il vous suffit tout simplement de taper étoile espace LAY et vous arrivez directement dans cette partie là puisque dès que nous allons commencer à saisir du code css il y aura beaucoup de lignes qui vont s'accumuler les unes sous les autres. Donc ça, ça vous permet d'aller rapidement d'un endroit à un autre dans votre code css comme là je viens de le faire pour la typo par exemple.

Programme détaillé de la formation

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 3 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5
  • Maîtrisez le préprocesseur CSS : SASS
    Découvrir
    Apprendre à coder avec le préprocesseur CSS SASS
    1h33 14 leçons 5 / 5