5 conseils pour vos feuilles de style CSS

Je vous ai déjà indiquer quelques uns de mes conseils pour indenter et structurer son code source ce qui impliquent justement les feuilles de styles CSS.

Allons un peu plus loin dans l’optimisation de celles-ci.

I – Inclusion des styles

Pour inclure vos élements de styles vous avez plusieurs méthodes :

• La méthode en ligne (Pas bien !). c’est à dire inclure directement vos styles aux élements XHTML
  [html]
  <div style="margin:0 auto;text-align:center;width:960px;">
  Bloc
  </div>
  [/html]
• L’importation d’un fichier CSS (Bien ), un fichier CSS propre.
  • en utilisant @import (pas bien)[html]
    <style type="text/css" />
    @import(‘style.css’);
    </style>
    [/html]
  • en utilisant link (bien )[html]
    <link media="screen" href="css/style.css" rel="stylesheet" type="text/css" />
    [/html]

II – Trop de feuilles de styles…

Tuent les feuilles de styles ? Non, mais afin de réduire le nombre de requête HTTP, je vous conseil de regrouper vos différentes feuilles de styles en une seule.

[html]
<!– pas ok –>
<link media="screen" href="css/reset.css" rel="stylesheet" type="text/css" />
<link media="screen" href="css/forms.css" rel="stylesheet" type="text/css" />
<link media="screen" href="css/style.css" rel="stylesheet" type="text/css" />

<!– ok –>
<link media="screen" href="css/style.css" rel="stylesheet" type="text/css" />
[/html]

III – Postionnement

Techniquement, il n’y a aucun emplacement spécifique pour placer votre feuille de style CSS dans votre page web.

Logiquement, celle-ci doit se mettre au sein de la balise head, ceci afin de faciliter son chargement et d’éviter un affichage non stylisé du contenu avant la mise en forme par cette feuille de style.

IV – Regroupez

Il est judicieux de reperer les propriétés CSS identiques à plusieurs élements et donc de les regrouper.

[css]
<!– pas ok –>
.remove {color:red;}
.red {color:red;}

<!– ok –>
.remove, .red {color:red;}
[/css]

V – Raccourcissez

Que cela soit avec les marges (margin ou padding) ou les bordures, raccourcissez les lignes pour le haut, la droite, le bas et la gauche en une seule propriété.

[css]
<!– pas ok –>
#bloc {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
border-top:1px solid red;
border-right:1px solid red;
border-bottom:1px solid red;
border-left:1px solid red;
}

<!– ok –>
#bloc {
margin:10px;
border:1px solid red;
}
[/css]