Quel est votre style CSS? - les mannequins

L'un des aspects les plus déroutants du CSS (Cascading Style Sheets) est que vous pouvez écrire des styles de plusieurs façons. Similaire à l'écriture de prose, juste parce que vous comprenez les règles de base de la grammaire et l'orthographe ne signifie pas que vous avez maîtrisé l'écriture de la prose concise.

Les concepteurs de CSS expérimentés consacrent un temps considérable à l'élaboration de CSS courts et clairs, faciles à éditer et à mettre à jour. Mais ceux qui sont nouveaux à CSS sont enclins à écrire plus de styles que nécessaire et à créer des styles redondants.

Non seulement le code redondant prend plus de temps à être téléchargé sur un navigateur Web, mais il est beaucoup plus difficile à modifier ou à réviser plus tard. Et plus votre code est redondant, plus vous risquez de rencontrer des conflits de style.

Voici cinq astuces pour écrire des styles propres et efficaces:

• Ne créez jamais deux styles quand c'est suffisant. Par exemple, vous pouvez créer un style en utilisant le sélecteur de balises pour toutes les balises

  qui modifie la famille de polices de vos titres, puis créer un second style à l'aide d'un sélecteur de classes que vous pouvez modifier Couleur.

  Mais il serait plus efficace de définir à la fois la couleur et la famille de polices dans le même style. N'oubliez pas que vous pouvez toujours revenir en arrière et modifier un style pour ajouter une autre règle si vous souhaitez modifier la mise en forme du style.

• Abréger les codes de couleurs hexadécimaux. Vous pouvez définir des couleurs en CSS en incluant l'intégralité du code de couleur hexadécimal. Toutefois, lorsque vous utilisez des codes de couleur qui sont répétitifs, vous devez inclure uniquement les trois premiers caractères. Par exemple #ffffff est le même que #fff; les deux vont créer la couleur blanche.

• Utilisez des feuilles de style externes. Vous pouvez définir des styles dans une feuille de style interne en haut de chaque page Web, ou vous pouvez enregistrer vos styles dans un fichier externe avec le. Css extension et joindre cette feuille de style à toutes vos pages Web. Les feuilles de style externes sont intrinsèquement plus efficaces car elles vous permettent d'utiliser le même style sur toutes les pages de votre site.

  Par exemple, si vous définissez un style qui affiche tous les titres principaux en gras, bleu et gros, l'enregistrement de ce style dans une feuille de style externe vous permet d'utiliser le même style pour chaque titre. Ensuite, si vous décidez plus tard que vous voulez changer vos titres en vert, vous pouvez changer le style dans une feuille de style externe et changer tous les titres à la fois.

  Si vous aviez enregistré les styles dans une feuille de style interne, vous auriez à modifier le style de titre dans chaque fichier.

• Développez une convention de dénomination pour vos styles. Bien que vous puissiez nommer les styles créés avec les sélecteurs de classe ou d'ID comme vous le souhaitez, il est préférable de choisir des styles qui ont un sens en dehors du formatage.Par exemple, si vous créez un style appelé. redHeadlines, puis décider plus tard que vous voulez tout votre. RedHeadlines pour être bleu, soit vous finirez avec un style de titre bleu appelé. redHeadlines ou devra renommer le style.

  Le fait de renommer le style implique de revenir en arrière et de réappliquer ce style partout où vous avez un titre rouge que vous voulez virer au bleu, ce qui annule la puissance des styles pour effectuer des mises à jour globales. Pour éviter ce problème, créez des noms de style qui se réfèrent à la position ou l'importance des éléments, tels que. MainHeadlines ou. sidebarHeadlines.

• * Testez et validez votre code. Même les concepteurs de CSS expérimentés font des erreurs, ce qui explique pourquoi Dreamweaver inclut de nombreux outils pour tester et valider le code de vos pages Web. Assurez-vous de tester votre CSS pour les erreurs courantes.

  Voici deux services de test en ligne que vous pouvez utiliser pour vérifier les erreurs dans votre code CSS. Entrez simplement l'URL d'une page Web sur Internet dans le champ d'adresse de l'un de ces sites et cliquez sur le bouton Soumettre pour recevoir un rapport indiquant les erreurs dans votre code:

  • Le W3C CSS Validation Service

  • XHTML-CSS : Soyez valide ou mourez en apprenant