Méthode d'écriture, vitesse d'affichage

Bonjour,

je me demande quelle est la bonne pratique pour obtenir un résultat identique, quelle est la solution qui sera analysée le plus rapidement.

Configuration A : écriture css

.textColGauche{width:250px;float:left}
.textColDroite{width:250px;float:right}

ou

.textColGauche,.textColDroite{width:250px}
.textColGauche{float:left}
.textColDroite{float:right}

La solution 1 donne 79 caractères, la 2 donne 99 caractères. Est-ce que je peux dire que la solution 1 sera plus vite analysée ? La solution 1 possède tout de même une répétition, est-ce une bonne chose ?

Configuration B : écriture en html

Est-il judicieux de créer des classes du style :

.floatL{float:left}
.floatR{float:right}
.width1{width:250px}

et d'assigner ensuite dans le document html :

<div class="floatL width1 unAutreStyle">blablabla...</div>
<div class="floatR width1 encorUnAutreStyle">blablabla...</div>

en gardant à l'esprit que l'on pourra se servir souvent de certaines classes dans le document html (comme les .floatL ou .floatR).

L'autre style d'écriture pour le même rendu serait par exemple :

.Style1{float:left;width:250px}
.Style2{float:right;width:250px}

avec

<div class="Style1">blablabla...</div>
<div class="Style2">blablabla...</div>

En bref, est-il préférable de répéter des propriétés identiques dans le document css ?
Ou de répéter des classes identiques dans le document html ?
Modifié par Newzic (25 Apr 2012 - 12:25)

Bonjour,

la configuration B est un moyen détourné de mélanger la présentation du contenu comme on le faisait dans les années 90 avec comme défaut des pages HTML volumineuses et une maintenabilité à s’arracher les cheveux.

Pour les deux solutions que tu proposes dans la configuration A si tu veux soulager jusqu’à l’extrême ton serveur prend l’écriture la plus courte mais après il faut bien avoir à l’esprit que la douzaine de caractères que tu économises est complètement négligeable par rapport à la moindre petite image présente sur ta page.

Ensuite savoir si le navigateur chez le client analyse plus vite une css que l’autre je dirais que c’est négligeable à moins d’avoir vraiment une page css vraiment costaude et là il faudrait se demander plutôt si on n’a pas du ménage à faire.

Peut être que compresser la feuille de style serait un bon début (mais le code de Newzic est déjà présenté "compressé") ? Et somme toute suffisant en regard des autres optimisations bien plus importantes à faire sur un site ? Surtout ne pas faire appel à plusieurs petits fichiers css pour éviter le nombre de requêtes, ça semble évident mais c'est pourtant très à la mode (moi-même, quand je n'y connaissais rien j'avais succombé à cette mode...). Il faut aussi "gziper" les fichiers .css et .js à partir du .htaccess, voilà une mesure qui me semble prioritaire...