10 conseils CSS pour vous simplifier la vie

Le 30 mars 2007

Ceci est une traduction d'un excellent tutoriel de Paul O’Brien sur les CSS. De plus je trouve que celui-ci représente la meilleure façon d'aborder et d'améliorer notre pratique des CSS.

Comme avec la plupart des choses, une approche logique et structurée est la meilleure façon de progresser. Par conséquent j'ai listé 10 conseils rapides (sans aucun ordre spécial) pour vous faciliter la vie avec votre codage de CSS.

1. Faire simple

Ceci peut sembler évident mais si vous êtes amené à utiliser un codage complexe pour réaliser votre design alors demandez-vous vraiment si cela est vraiment nécessaire, pensez-vous plus à l'impact visuel ou à vos visiteurs. Trop souvent les concepteurs veulent rendre le design d'un site parfait et ont beaucoup de mal pour reproduire un certain effet visuel. Une fois le site réalisé c'est au tour des visiteurs de le trouver irritant ou inutilisable.

Le code complexe est habituellement le résultat d'une pensée confuse. Imaginez la disposition de façon logique et réfléchissez de l'extérieur vers l'intérieur en partant du bas vers le haut si possible. Lister les conteneurs (un bloc généralement entre une balise <div> à une autre balise </div>) dont vous aurez besoin et divisez les en plus petit morceaux. Habituellement je commence par un wrapper (conteneur de page) et progresse logiquement ensuite par le header (l'en-tête), la navigation, le contenu principal et les titres de bas de page etc. essayant de préserver la continuité du document autant que possible.

Le bon design visuel est nécessaire pour attirer des visiteurs en revanche vous devez toujours avoir un bon contenu, un contenu utilisable et accessible. Si vous trouvez que votre code CSS ou HTML ressemble à des spaghettis alors il serait peut être temps de le revoir afin de, si vous le pouvez, le simplifier. A l'avenir, ceci vous facilitera la vie pour le maintenir, vous gagnerez en nombre de ligne de code et en bande passante.

2. Ne pas employer de hacks (bidouillage) à moins que ce soit un problème connu et documenté

C'est un point important car je vois trop souvent des hacks utilisées pour réparer des éléments qui ne semblent fonctionner à première vue. Si vous recherchez une solution pour résoudre un certain problème dans votre design, d'abord faites une recherche (Google est votre ami dans ce cas) et essayez d'identifier véritablement le problème auquel vous êtes confronté.

Si vous trouvez que ce problème est connu alors 99% du temps il y aura une solution connue pour ce type de problème. Et vous pouvez sans risque répéter la manipulation décrite s'il y a lieu en sachant bien que vous pouvez corriger un problème et que vous ne corrigez pas le mauvais codage.

Je ne pourrais pas compter le nombre de fois où j'ai vu des modèles de page en utilisant des hacks alors qu'il fallait seulement ajuster les marges par défaut de la page (voir le prochain conseil).

3. Faire attention aux balises margin (marges) et padding (remplissage) sur tous les éléments que vous employez

Tous les navigateurs appliquent le remplissage et les marges par défaut à la plupart des éléments et la valeur qu'ils appliquent change sensiblement. Par conséquent vous devez contrôler le remplissage et les marges sur tous éléments que vous employez. Toutes les informations sont détaillées dans cet excellent article du même auteur « Aucune marge d'erreur » (en anglais).

4. Eviter de trop employer le positionnement absolu

La plupart des débutants au CSS partent rapidement sur le positionnement absolu parce qu'il est assez direct et simple, car il fait ce qu'on lui indique. Les modèle de pages qui utilisent le positionnement absolu posent quelques problèmes, le plus important est le fait que les éléments absolus sont enlevés de la structure de la page.

Ceci signifie que quand vous placez un élément en absolu il n'est plus en cohésion avec votre page. Il recouvrira tout ce qui ce trouve sur sa position et n'aura aucune interaction avec le reste du contenu. Le résultat d'un positionnement en absolu est que vous finissez par devoir tout contrôler avec du positionnement en absolu, ce qui rendra la structure de la page très rigide et inflexible.

Le problème rencontré le plus courant est lorsqu'en utilisant le positionnement absolu pour deux ou trois colonnes est « comment mettre un footer (pied de page) en bas de chacune des trois colonnes ? » La réponse est c'est impossible, à moins de mettre un script ou bien de définir la taille des trois colonnes.

Au lieu de cela vous devriez utiliser la plupart du temps le positionnement statique, les margin (marges) et les floats (balise pour mettre du contenu à gauche ou à droite) statiques pour maintenir la disposition soudée. Le positionnement statique est la base, il signifie fondamentalement aucun positionnement et les éléments prennent juste l'espace dans la structure normale du document. Si les éléments sont définis normalement alors ils ont une construction logique et chaque élément suit les autres sans devoir se placer du tout. Vous pouvez employer des marges pour écarter les éléments ou utiliser des balises float quand vous voulez des éléments alignés horizontalement.

5. Eviter le « div-itritus »

Bien que le « div-itritus » ne soit pas un vrai mot il est maintenant généralement utilisé pour qualifier les modèles de pages qui utilisent trop de balises divs et pas assez de HTML sémantique. Le HTML sémantique signifie utiliser l'élément HTML correct au lieu de mettre des divs à tout bout de champs pour tout. L'élément div est un diviseur générique du contenu et cela s'arrête là, 99% du temps on aura une autre balise HTML parfaite pour ce qu'on souhaite faire.

par exemple p, h1, h2, h3, h4, h5, h6, ul, ol, dl etc….

Utilisez les balises div pour diviser la page en sections logiques ou lorsqu'il n'y a pas de meilleure alternative. Si votre page est logiquement divisée en sections qui emploient l'id (id="nom-de-votre-div") pour identifier chaque section séparement ceci vous permettra de contrôler les éléments intérieurs grâce à leur section sans abuser des classes sur chaque élément.

par exemple #top-section h1 {color:red} (voir le prochain conseil sur le « class-itritus »).

Une utilisation inappropriée des divs peut être trouvé dans l'exemple suivant :

[html]
Sub Heading
This is the content
[/html]

Souvent on peut réduire le code ci-dessus à ceci :

[html]

Heading

Sub Heading

This is the content

[/html]

Comme vous pouvez voir, en employant le bon HTML pour décrire le contenu vous donnez à votre page la structure inhérente au web et la signification sans n'importe quel effort supplémentaire.

6. Eviter « Class-itritus »

« Class-itritus » est semblable à « div-itritus » composé de mot (comme expliqué ci-dessus) et se rapporte à l'abus de classes (ou de l'identification) quand en fait rien de tout cela n'est nécessaire. Si votre page est logiquement divisée alors vous pourrez contrôler beaucoup d'éléments sans besoin de millions de classes.

Un exemple commun de l'abus de classes est montré ci-dessous :

[css] a.link{color:red;text-decoration:none} [/css] [html] [/html]

Tous liens ont été associé à une classe de .link afin de les nommer alors que c'est complètement inutile. Si nous appliquons une identification ou donnons une classe à l'UL à la place, nous pouvons modifier toutes les ancres au sein de cette UL sans devoir ajouter n'importe quelles classes supplémentaires.

[css] #nav a {color:red;text-decoration:none} [/css] [html] [/html]

Comme vous pouvez voir nous obtenons le même effet et nous gagnions en temps et en lisibilité. Beaucoup de fois la balise UL est unique dans une section et vous pouvez employer l'identification au niveau parent sans devoir également l'ajouter dans la balise UL. (Retenez que les identifications sont uniques et peuvent seulement être employées une fois par la page)

7. Valider votre code

Visiter le Validator à chaque fois et valider votre CSS et HTML surtout lorsque vous êtes en train d'apprendre quelque chose de nouveau. Si vous débutez en HTML et/ou CSS, validez régulièrement lors de votre développement de sorte que vous puissiez être sûr que le code que vous employez est correct ; cela vous permettra de vous familiariser avec la syntaxe correcte.

Ne pas attendre que vous ayez fini de coder complètement le design pour tester et vous apercevoir que vous utilisez des éléments inappropriés, vous vous retrouverez avec beaucoup plus de travail que nécessaire. Valider fréquemment vous évitera également des erreurs simples comme les fautes de saisie qui se cachent dans le code.

8. Rationaliser votre code

À chaque étape du développement demandez-vous si vous avez besoin de ce bloc supplémentaire de divs ou pas. Les éléments existants peuvent-ils être utilisés pour des fonds d'image sans ajouter encore du code?

Le fait de prévoir et la planification de votre futur design mèneront souvent à un code plus concis, plus propre et à un design beaucoup plus facile à gérer et à faire évoluer.

9. Flexibilité

Se rappeler qu'une page web ne ressemble pas à une page imprimée et que l'utilisateur a finalement plus de contrôle sur la façon dont votre page sera affichée que vous. Garder cette idée en tête, essayez de tenir compte de la flexibilité dans votre design de sorte que des évènements comme le redimensionnement de texte ne ruinent pas tout votre design. Evitez également de donner une width (largeur) et height (hauteur) fixes ou sinon employez les ems pour permettre à l'ensemble de s'élargir quand la taille du texte est changée.

Avec de petits réflexes et une certaine patience vous arriverez toujours à faire que votre page soit belle et réponde aux exigences d'accessibilité.

10. Pour quel navigateur?

Un concepteur n'est pas souvent heureux à cause des variations dans l'affichage proposé par les différents navigateurs. Il n'y a pas de solution ou de réponse toute faite à cette problématique (à part ce qui concerne les conseils déjà donnés) et ma méthode de travail est la suivante.

D'abord décidez avec votre client (ou vous-même) dans quels navigateurs vous voulez que votre site apparaisse bien. Ceci sera naturellement basé sur beaucoup de facteurs (on n'en parlera pas ici) mais le mieux serait de voir simplement les statistiques de fréquentation pour définir le navigateur de vos visiteurs.

Une fois que vous avez décidé pour quels navigateurs vous allez développer, alors il faudra s'assurer que vous avez accès à ces navigateurs. La manière la plus facile est de télécharger le navigateur que vous avez besoin ainsi vous pourrez tester localement.

Si vous ne pouvez pas télécharger les navigateurs pour une raison ou une autre, ou vous devez tester sur une autre plateforme, alors il y a un certain nombre de sites qui vous offriront l'accès à distance ou les screenshots (photo de votre site). Certains sites exigent un paiement et les plus simples à utiliser sont souvent gratuits (une recherche rapide sur Google vous donnera la liste).

Une fois que vous avez choisi les navigateurs, vous pouvez commencer à coder et il faudra vérifier votre design à chaque étape dans ces navigateurs. En d'autres termes écrire une ligne de code vous obligera à vérifier la page dans 3 ou 4 navigateurs. Cependant avec de l'expérience vous apprendrez ce qui est susceptible de poser des problèmes et vous pouvrez vérifier moins fréquemment.

Si vous adoptez cette démarche de vérifier à chaque étape vous découvrirez bientôt ce qui fonctionne ou pas, vous identifierez immédiatement les problèmes et déterminerez la cause immédiatement. Cela serait différent si vous attendiez le dernier moment pour tester le design entièrement. En effet cela pourrait prendre des heures (ou des jours) pour identifier d'où vient le problème. Et il sera peut être trop tard pour essayer de le réparer parce que vous aurez déjà construit la page entière sur une fonction qui est propre à un seul navigateur et il faudra partir à nouveau sans cette fonction.

En vérifiant vous allez éliminer ce problème dès qu'il survient et après un petit changement de design de la page s'adaptera aux navigateurs choisis. Vous ne pouvez pas faire ces petites modifications et ces changements de design si vous attendez jusqu'à la fin pour tester.

Ces quelques conseils pour le codage CSS ne sont pas triés dans un ordre spécial et la plupart coulent de source. En suivant les conseils donnés vous rendrez votre vie de webdesigner beaucoup plus facile et moins stressante.


4 Commentaires sur "10 conseils CSS pour vous simplifier la vie"

  • Stéphane
    31 mars 2007 (10:42)
    Répondre

    Merci pour la traduction. Cet article est vraiment très intéressant.

  • Sylvain
    1 avril 2007 (17:10)
    Répondre

    Merci pour ce bon article, ce sont des choses simples mais qu’on ne doit surtout pas oublier. Et puisque tu parles des CSS et que nous sommes dans la rubrique « Tutoriaux » j’aimerai te faire pars de mes récentes découvertes : un excellent tutoriel sur l’utilisation des CSS dans les Emails ainsi que sur le texte altrenatif dans les images

  • wavemaker
    10 juin 2007 (17:59)
    Répondre

    Merci pour ces infos et bien vu pour les balises margin…

    Sinon, bon contenu et bon blog, continues !

    A+

  • Mrfou
    17 mai 2012 (15:52)
    Répondre

    J’apprends le CSS pour mon site, mais je dois dire que c’est vraiment difficile ton article m’aide bien. Mais j’ai encore trop d’erreur de div et de class lol. Enfin je décourage pas !


Votre message

Les balises HTML suivantes sont acceptées (a, abbr, acronym, b, blockquote,code, em, i, strike, strong)