Web-tutoriel

Tutoriels javascript css php java jquery

Les bonnes pratiques CSS pour optimiser votre code 3 janvier , 2010



Quand on ouvre un fichier CSS que l’on a fait depuis quelques temps et pas mal modifié depuis, on se rend vite compte que dedans c’est le bordel !!
Cet article va donc vous permettre de mettre un peu tout ça au clair, d’ordonner un peu le contenu de votre fichier, et d’optimiser un peu son contenu.
Voici donc X conseils pour réduire la taille de votre fichier CSS, et ordonner son contenu :

1) Rester organisé :

Il est nécessaire de ne pas créer ses éléments CSS au fils de l’eau et de placer ses éléments CSS sur les id et les classes comme ils viennent.

Cela vous permettra de garder à l’oeil dans votre CSS l’héritage des éléments en cascade d’un coup d’oeil sans avoir à se demander à chaque de quoi l’élément qu’on est train de modifier hérite.

On commence donc par placer :
– les resets d’éléments globaux
– les éléments HTML les plus génériques
– les éléments principaux de construction de la page
– les éléments secondaires de construction de la page
– puis les éléments de formulaires par exemple
– les éléments divers

Ce qui donne en gros :

/* GLOBAL RESET */
* {
    margin: 0;
    padding: 0;
}
img {
    border: none;
}
 
/* HTML GENERIQUE */
body {
    font-family:"Lucida Sans",Verdana,Arial,sans-serif;
    font-size:100%;
}
 
a:link, a:visited, a:active {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
 
h1 { }
h1 a { }
h1 a:hover { }
 
h2 { }
h2 a { }
h2 a:hover { }
 
/* ELEMENTS PRINCIPAUX DE MA PAGE */
#page { }
#header { }
#content { }
#sidebar-first { }
#sidebar-second { }
#footer { }
 
/* ELEMENTS SECONDAIRES */
#header-titre { }
#contenu-titre { }
 
/* ELEMENTS DE FORMULAIRE */
input { }
input.button { }
label { }
 
/* DIVERS */
.clear { 
    clear: both;
}
 
.left {
    float: left;
}
 
.right {
    float: right;
}

Il est même ppossible d’aller plus loin dans le « GLOBAL RESET CSS » :

/* -----------------------------------------------
    GLOBAL RESET CSS
----------------------------------------------- */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
form, label, legend,
table, caption, tbody, tfoot, thead, tr, th {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    font-family:Georgia,serif;
    vertical-align:baseline;
}

2) Laisser son nom en haut de son CSS, toujours utile pour se souvenir d’où ça vient :

Personnellement, je laisse mon nom et l’adresse de mon site en haut de mes CSS, ça permet à celui qui le reprend de savoir d’où il vient et de me re contacter si besoin :

/* ---------------------------
    Theme Name: Web Tutoriel
    Theme URI: http://www.web-tutoriel.com/
    Description: Theme du site web-tutoriel.com créé par Nicolas MAROT (blog.xenetis.org).
    Author: Nicolas MAROT
------------------------------
Mes couleurs :
    1879DA : bleu bannière
    2B70B5 : bleu des titres
    EEEEEE : fond gris
    CCCCCC : encadré gris
    7C9099 : fond colonne 1
    E0E9EF : fond colonne 2
------------------------------ */

Il peut être aussi intéressant pendant le développement de laisser en haut du CSS les couleurs que l’on utilise le plus souvent dans le thème de son site, ça évite d’avoir à ré-ouvrir Photoshop à chaque fois qu’on veut récupérer une couleur.

3) Garder une sauvegarde de vos modèles :

Une fois votre template considéré comme terminé, il peut être utile de le sauvegarder dans un coins histoire de pouvoir revenir en arrière si vous recommencer à pourrir votre CSS 😉
Vous pouvez garder plusieurs modèles : une présentation 2 colonnes, 3 colonnes, une présentation style blog, impression, mobile etc…

Perso, je ne repars jamais d’un fichier CSS vide, je commence toujours par réutiliser un template déjà fait avec au minimum mon GLOBAL RESET et mes éléments HTML de base.

4) Préférez le tiret au souligné :

Certains vieux navigateurs (hé oui on est malheureusement pas tous à guetter la sortie de la mise à jour de firefox ou IE berp) ont un peu de mal avec les soulignés (underscore) dans les nom d’id ou de classe, il est préférable d’utiliser un tiret à la place: sidebar_first devient donc sidebar-first.

5) Conventions de nommage :

Vous remarquerez qu’au départ, j’ai appelé mes 2 colonnes : sidebar-first et sidebar-second.
Au départ elles s’appelaient sidebar-left et sidebar-right mais quand j’ai voulu déplacer mes 2 colonnes du coté droit je me trouvais un peu embêté avec leur nom (surtout que la left était passée à droite de la right) du coup je leur ai donné un nom plus générique sidebar-first et sidebar-second.

L’un des avantage majeurs du CSS est de pouvoir séparer les styles du contenu, vous pouvez redessiner votre site en ne touchat qu’au CSS sans toucher à l’HTML, autant donc utiliser des noms d’éléments génériques.

De même, une classe lien-bleu-clair n’aura plus trop de sens quand vous déciderez de passer ce lien du bleu au rouge …

6) Éviter de se répéter => code plus court :

Si 2 éléments ont les mêmes propriétés, préférer la concaténation des 2 :

h1, h2 {
    margin: 1em 0.5em 1.2em 0;
    font-size: 1.2em;
    color: #2B8ADB;
}

Plutôt que ça :

h1 {
    margin: 1em 0.5em 1.2em 0;
    font-size: 1.2em;
    color: #2B8ADB;
}
h2 {
    margin: 1em 0.5em 1.2em 0;
    font-size: 1.2em;
    color: #2B8ADB;
}

Toujours utiliser le rassemblement des éléments qui peuvent l’être :

h1 {
    margin-top: 1em;
    margin-right: 0.5em;
    margin-bottom: 1.2em;
    margin-left: 0;
}

Équivaut à ça :

h1 {
    margin: 1em 0.5em 1.2em 0;
}

Pour se souvenir de l’ordre, c’est important, on commence en haut et on fait le tour dans le sens horaire : top, right, bottom, left.

Vous pouvez aussi rassembler les éléments top et bottom ainsi que left et right s’ils sont identiques :

h1 {
    margin-top: 1em;
    margin-right: 0.5em;
    margin-bottom: 1em;
    margin-left: 0.5em;
}

Équivaut à ça :

h1 {
    margin: 1em 0.5em;
}

7) Feuille de style plus légère, plus vite chargée:

En suivant les conseil ci-dessus, vos feuilles de style seront plus légère.
Elles seront donc chargées plus vite ce qui est toujours appréciable quand on visite un site.
Cela vous permettra aussi de ne pas vous perdre dans votre code et de le maintenir plus facilement.

Supprimez ce qui ne vous sert à rien et regroupez ce qui peut l’être.

Faites très attention si vous utilisez un framework CSS, on peut très facilement se perdre dans l’héritage des éléments et galérer à supprimer un élément du style voir être obliger de rajouter un élément de style pour supprimer un élément hérité au dessus.

Un autre petite astuce: pas besoin de spécifier d’unité pour mettre un élément à zéro, remplacer vos 0px, 0em par 0.

8 ) Commencer par écrire vos CSS pour Gecko (Firefox) et ajouter des hack pour Webkit et IE:

Un CSS qui fonctionne pour Gecko (Firefox, Mozilla, Netscape) ne nécessitera que peu d’adaptation pour fonctionner ensuite pour Webkit (Safari, Chrome) et Internet Explorer.
Cela vous évitera bien des problèmes, ils ne vous restera plus qu’à faire quelques hacks pour Webkit et IE.

9) Séparer les hacks spécifiques navigateur :

Pour garder propres ses feuilles de style, veillez à séparer vos hack de navigateur.
Il vous suffit par exemple de créer un fichier style.css puis d’ajouter sous conditions les hack d’Internet Explorer 7 contenu dans le fichier style-ie7.css.
En HTML ça donne :

<link href="style.css" rel="stylesheet">
<!--[if IE 7]>
    <link href="style-ie7.css" rel="stylesheet">
<![endif]-->

10) Validez votre code avec le W3C:

Profitez du validateur CSS du W3C libre. Si vous êtes coincés et que votre mise en page ne fait pas ce que vous voulez qu’elle fasse, le validateur CSS sera d’une grande aide en signalant les erreurs.


Laissez une réponse

Nom (requis)

Email (requis)

Site Web

Haut