Performance Css! plus de doublons ou uniques

Question

Dans les grands projets ...

Qui est plus rapide et optimisé?

Quel est le meilleur pour le navigateur et le trafic?

Tout changement dans le futur.

* 1.

.class1,.class2{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
width:34%; 
float:right 
} 
.class2{ 
width:44%; 
float:left 
} 

2.

.class1{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
width:34%; 
float:right 
} 
.class2{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
width:44%; 
float:left 
} 

* 3.

.class1,.class2{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
} 
.class1{ 
width:34%; 
float:right; 
} 
.class2{ 
width:44%; 
float:left; 
} 

* nouvelle mise à jour proposée par @connexo.

Sepas pour votre temps!

Answer 1

Voilà comment je le ferais. Placer toutes les propriétés des deux classes dans un bloc, puis définir les propriétés déviantes en solo après cela.

.class1, 
.class2 { 
    line-height: 40px; 
    margin-left: 4%; 
    text-align: left; 
} 
.class1 { 
    float: right; 
    width: 34%; 
} 
.class2 { 
    float: left; 
    width: 44%; 
} 

En dehors de cette chose structurelle que je vous recommande de trier les déclarations par ordre alphabétique et ne négligez pas le point-virgule après la dernière déclaration dans un bloc.

Answer 2

Je ne suis pas sûr si la question est correcte. Dans le cas de CSS, je voudrais demander comment il sera facile de le maintenir. Lorsque vous travaillez sur des sites Web de plus grande taille, la mise à jour d'une déclaration de style vaut mieux que la mise à jour de 10 déclarations. Si vous êtes sûr que les comportements de classe 1 et de classe 2 seront toujours les mêmes, j'irais avec le premier exemple. Il sera plus facile de trouver ce qui doit être mis à jour.

Les deux exemples n'affecteront pas sensiblement les performances, aussi, ils n'ont rien à voir avec le référencement (au meilleur de ma connaissance).

J'espère que cela répond à la question ...

Answer 3

Il y a plusieurs choses que vous devez faire attention à:

1. Utilisez sténographies
Cela permettra de réduire l'espace inutilement utilisé. -> Optimisation du trafic

2. rapetisser votre code
même que pour 1.

3. Scinder votre CSS - code (critique dessus du pli CSS)
C'est un moyen très efficace pour optimiser la vitesse de votre page. Vous pouvez mettre le code pour la première vue que l'utilisateur peut voir en haut de votre page et le reste en bas. Ensuite, le navigateur peut rendre la page, sans télécharger complètement la page.

4. Utilisez inline CSS
Ce n'est pas la solution beautifulest, mais il peut nuire à la performance. Mais n'écrivez pas tous vos CSS en ligne, seulement quelques petites parties.