Comment écrire du CSS propre sans duplication ni encombrement

Après des semaines de travail sur un projet Web, les fichiers CSS se remplissent de définitions répétitives, de noms de classe longs et difficiles à comprendre et de lignes dont le but est difficile à retracer. Ce chaos n’apparaît pas soudainement, mais s’accumule plutôt à chaque petit ajustement ou ajout temporaire qui devient permanent.

Mais écrire du CSS ne doit pas nécessairement être aléatoire ou fastidieux. Il existe des techniques simples et des méthodologies éprouvées qui aident à organiser le code, à réduire la duplication et à améliorer l’extensibilité. En suivant quelques règles et pratiques, un fichier CSS peut être transformé en quelque chose de clair, facile à comprendre et rapide à charger.

Dans ce guide, nous partageons des étapes pratiques pour vous aider à écrire du CSS propre, de la première ligne à la dernière modification.

Depuis ses débuts à la fin des années 1990, le champ d’application du CSS s’est considérablement élargi. Il s’agit désormais d’une technologie puissante et avancée, largement prise en charge par les navigateurs de bureau et mobiles, mais il reste encore beaucoup à apprendre. Que vous soyez novice en CSS ou que vous souhaitiez apprendre CSS pour la première fois, cette liste de contrôle vous aidera, avec des conseils pratiques, des directives générales et des ressources de haute qualité.

1. Assurez-vous d’abord de connaître le HTML.

La première chose que vous devez savoir avant de commencer à apprendre le CSS est le HTML. Cela peut sembler évident, mais il y a quelques concepts importants à renforcer avant de se lancer dans la mise en forme de votre contenu.

Votre parcours d’apprentissage se concentrera sur la séparation de la sémantique (HTML) et du style (CSS). Assurez-vous d'utiliser un balisage clair et de qualité, et débarrassez-vous de toutes les balises HTML stylistiques auxquelles vous êtes habitué.

La documentation HTML de Mozilla est excellente. (Et tout son matériel couvrant la plate-forme Web), alors commencez par là si vous n'êtes pas sûr de votre HTML.

2. Commencez par les bases absolues du CSS

Restez sur le site Web de Mozilla etPlongez dans l'introduction au CSS.

À ce stade, il y a deux choses fondamentales à apprendre : comment écrire du CSS de base et le lier à des fichiers HTML. La documentation de Mozilla commence par une introduction simple au CSS en utilisant cet exemple :

 

Même si vous n'êtes pas doué pour écrire du CSS, vous pouvez probablement comprendre ce que fait cet extrait : il rend les éléments h1 rouges et définit une taille de police spécifique.

L'article de Mozilla « Démarrer avec CSS » décrit la deuxième partie du puzzle, expliquant comment appliquer CSS, comme ci-dessus, aux fichiers HTML. Les feuilles de style internes sont probablement le moyen le plus rapide et le plus simple de démarrer, mais les feuilles de style externes présentent de nombreux avantages, c'est donc une bonne idée d'essayer les deux.

3. Jouez à quelques jeux

Bien qu'il existe de nombreux jeux formidables qui vous aident Apprendre le CSSCependant, ils couvrent généralement des techniques plus avancées telles que la planification du réseau. CSS Diner est plus adapté aux débutants et devrait vous aider à comprendre les sélecteurs CSS qui marquent des parties spécifiques de votre document pour le formatage. L’exemple ci-dessus montre un sélecteur « h1 » simple, mais il peut être plus complexe.

a#selected > .icon,
.box h2 + p {
    font-weight: bold;
}

Le test est considéré Speedrun CSS Un autre bon test de vos compétences avec les sélecteurs, même si – comme son nom l’indique – cela peut être une expérience plus fatigante !

4. Utilisez les outils de développement Chrome/Safari/Firefox

Une fois que vous aurez maîtrisé les bases, vous serez presque prêt à commencer à écrire vos propres feuilles de style. Cependant, vous pouvez commencer à expérimenter avec CSS directement dans votre navigateur, évitant ainsi d'avoir à ouvrir un éditeur de texte et à commencer à modifier les fichiers.

Par exemple, l'inspecteur d'éléments dans Google Developer Tools vous permet d'afficher le CSS qui s'applique à tout ce qui se trouve sur n'importe quelle page que vous consultez :

De plus, vous pouvez utiliser le panneau Styles pour modifier n'importe quel fichier CSS, ou même créer de nouveaux styles, et voir les résultats instantanément.

Ces outils varient légèrement selon chaque navigateur, mais vous devriez pouvoir les utiliser pour améliorer vos compétences. Chrome dispose d'une excellente prise en charge de la saisie semi-automatique pour suggérer des noms et des valeurs de propriétés acceptables. En expérimentant, vous pouvez découvrir et en apprendre davantage sur différentes fonctionnalités via des liens directs vers la documentation du Mozilla Developer Network (MDN) :

5. Essayez un éditeur en ligne

Avant d'utiliser cet éditeur de texte, il existe une autre façon de tester vos compétences CSS sans avoir à gérer des fichiers locaux. Il existe de nombreuses applications Web, telles que : CodePen ou JSFiddle. Ces outils sont similaires à certains jeux que vous avez déjà vus, à l'exception de la partie jeu. Il fournit des zones de texte que vous pouvez utiliser pour modifier le HTML et le CSS, avec un aperçu montrant le résultat final.

conseil
Bien que ces outils incluent généralement une section JavaScript pour développer vos compétences en programmation, celle-ci est totalement facultative. Ignorez simplement les sections « JS » ou « JavaScript » et concentrez-vous sur le HTML et le CSS.

Ces éditeurs incluent des fonctionnalités utiles telles que la mise en évidence de la syntaxe et le formatage du code. JSFiddle dispose d'un bon rapport d'erreurs, attirant votre attention sur les valeurs CSS non valides, par exemple. Il vous permet également d'enregistrer votre travail pour une utilisation ultérieure, et vous pouvez toujours copier et coller du HTML ou du CSS dans un fichier local si vous souhaitez l'utiliser dans vos propres projets.

6. Utilisez les meilleurs documents de référence.

Comme vous l’avez vu, bon nombre de ces ressources pointent vers le Software Developer Network (MDN). Cette source d’information sur la plateforme Web est excellente et complète ; Cela devrait être votre premier recours lorsque vous devez rechercher des détails sur un problème CSS.

Avertissement
Vous pourriez tomber sur un site W3Schools Lors de la recherche de sujets CSS ou de tout autre sujet lié au Web. Le nom du site suggère qu'il est affilié au W3C, l'organisme qui établit les normes pour les technologies Web. Mais ce n’est pas le cas ; Il s’agit d’un ensemble de documents provenant d’un tiers. Bien que sa qualité se soit améliorée, elle est encore loin d’être parfaite et le MDN est une source beaucoup plus fiable.

MDN dispose d'une multitude de supports CSS, allant des tutoriels aux quiz interactifs. Le site couvre tous les aspects du CSS, y compris les sélecteurs, le modèle de boîte, les couleurs et le débogage. Chaque propriété CSS possède une page de référence correspondante qui vous indique presque tout ce que vous devez savoir à son sujet.

Chaque page de référence de propriété comprend une explication des différentes valeurs, des exemples de leur utilisation et un tableau de compatibilité des navigateurs. Ce dernier point est nécessaire pour faire la distinction entre les fonctionnalités bien prises en charge et les fonctionnalités expérimentales qui peuvent ne fonctionner que dans certains navigateurs spécifiques.

Si vous recherchez une bonne alternative, les ressources CSS du W3C sont fiables. Cependant, soyez prévenu, il n'est pas très convivial pour les débutants, et vous ne devriez vous y référer qu'après avoir épuisé les excellentes informations de MDN.

7. Restez informé

Bien qu'il s'agisse d'une technologie mature et stable, CSS est encore en évolution. Les membres de différentes organisations continuent de suggérer des changements, des correctifs et de nouvelles fonctionnalités.

En tant que designer, votre défi va souvent au-delà de savoir comment faire quelque chose et se concentre plutôt sur ce que vous pouvez réellement réaliser. Vous pouvez changer la couleur du texte, mais pouvez-vous changer son contour ? Ou pouvez-vous utiliser un dégradé au lieu d'une couleur ?

Pour rester au courant des derniers développements et répondre à ces questions, vous devez rechercher une bonne source d'actualités CSS, qu'il s'agisse d'un podcast, d'un blog ou d'un compte de médias sociaux dédié.

Préparer Astuces CSS L'une des meilleures sources d'actualités CSS avancées. Il comprend des articles couvrant tous les aspects du CSS, ainsi qu'un excellent matériel de référence, notamment concernant des fonctionnalités telles que Flexbox et la grille.

Le podcast CSS est un programme saisonnier diffusé depuis cinq ans. Ses présentateurs sont très interactifs, leur permettant d'approfondir les détails du CSS sans rendre le sujet ennuyeux ou compliqué.

?? Dr Leah FerroExperte dans ce domaine, elle publie régulièrement sur X à propos du CSS et de la plateforme Web. Ça marche Gene Simmons Apple l'a sur Safari et publie sur Bluesky des informations sur les problèmes CSS. compte Groupe de travail CSS Très formel. Le compte ne publie qu'occasionnellement, pour promouvoir les mises à jour des spécifications et d'autres articles connexes de w3.org, mais le suivre est un excellent moyen de se tenir au courant des derniers développements.

8. Valider le CSS

Maintenant que vous avez créé des dizaines de feuilles de style, il est judicieux de vous assurer qu'elles sont exemptes d'erreurs. Les erreurs CSS peuvent être facilement masquées et difficiles à déboguer, alors assurez-vous d'obtenir toute l'aide possible.

Tant que c'était Vérificateur W3C C'est la référence en matière de vérification des erreurs CSS. Vous pouvez fournir une URL, un fichier ou une copie texte de vos modèles pour validation.

Si vos feuilles de style sont exemptes d'erreurs, vous verrez un message de félicitations amical et un badge que vous pourrez utiliser sur vos pages Web pour confirmer leur exactitude. L'affichage de ces messages n'est plus nécessaire, mais vous pouvez le faire si vous souhaitez mettre en valeur vos compétences sur votre portfolio ou votre site Web personnel.

En revanche, s'il y a des problèmes avec votre formatage, le vérificateur vous montrera des messages d'erreur détaillés les expliquant. Comme la plupart des erreurs, il peut être difficile de les comprendre si vous ne les connaissez pas. Examinez donc le code concerné pour identifier le problème avant de tenter de le résoudre.

9. Vérifiez la compatibilité du navigateur

La compatibilité entre navigateurs est un autre aspect important de la validité de la feuille de style. Ce problème est beaucoup moins courant qu'auparavant, mais les mises à jour CSS les plus récentes, y compris les fonctionnalités expérimentales, ne bénéficient pas toujours d'un support généralisé. Heureusement, il vous le dira. Puis-je utiliser Précisément avec des propriétés CSS qui fonctionneront dans tous les navigateurs.

Les informations ici sont denses, mais présentées de manière facile à comprendre. Vous devrez sélectionner les navigateurs que vous souhaitez prendre en charge, y compris le prédécesseur d'Edge, Internet Explorer, et sa compatibilité avec les ordinateurs. La bonne nouvelle est que la plupart des CSS sont facultatifs et que vous pouvez concevoir vos pages pour qu'elles se dégradent gracieusement lorsqu'elles sont affichées sur des navigateurs non compatibles.

10. Maîtriser la typographie CSS

La typographie est un élément fondamental de toute conception et n'a pas été prise au sérieux sur le Web jusqu'à l'avènement des polices CSS. CSS a toujours été flexible, prenant en charge une famille de polices qui vous permet de choisir un ordre préféré de polices à utiliser, en fonction de ce qui est disponible. Mais les vraies polices Web vous donnent plus de contrôle sur l'expérience et permettent à tous les utilisateurs de voir votre police même s'ils ne l'ont pas installée.

considéré comme Polices Google L'un des meilleurs fournisseurs de polices gratuites, les choix sont larges : près de 2000 XNUMX familles de polices au moment de la rédaction.

 

De nombreuses options et configurations sont disponibles, allant de différents poids, à la prise en charge de plusieurs langues et aux polices d'icônes. Après avoir personnalisé la police à votre guise, copiez le code d'intégration et ajoutez-le à votre fichier HTML. Vous pouvez également télécharger les fichiers de polices et les héberger localement si vous le souhaitez.

Un CSS structuré ne signifie pas seulement un fichier de code plus esthétique, mais améliore également les performances, la vitesse de développement et la collaboration en équipe. Commencer par un style d’écriture clair, utiliser des étiquettes compréhensibles et éviter les répétitions sont autant d’étapes qui permettront à votre code de fonctionner pour vous au lieu de devenir un fardeau.

Plus vous adhérez au principe « faire en sorte que CSS serve votre objectif sans complexité », plus il sera facile et rapide de modifier et d’étendre votre conception ultérieurement. Commencez par ces étapes simples et vous constaterez que CSS peut être amusant et organisé à la fois.