Utilisation intensive des classes pour réduire la taille CSS

Question

Je suis en expédition pour réduire la taille de mon fichier CSS. je pensais de l'astuce suivante:

J'ai plusieurs éléments qui utilisent des propriétés similaires, comme

.a { 
    float:left; 
    /* Other properties */ 
} 

.b { 
    float:left; 
    /* Other properties */ 
} 

.c { 
    float:left; 
    /* Other properties */ 
} 

Alors, je pensais, pourquoi ne pas faire un sélecteur de classe séparée, disons, k:

.k { 
    float: left; 
} 

puis d'inclure le sélecteur de classes k pour les éléments qui nécessitent float:left. Ainsi, nous pouvons supprimer la ligne float: left de .a, .b et .c De même, nous aurons des sélecteurs de classe pour toutes les propriétés communes comme float:right, font:normal normal normal 16px/normal arial,sans-serif. Cela permettrait d'économiser beaucoup de caractères dans le fichier CSS, et conduire à une petite augmentation de la taille du fichier html.

Que pensez-vous de cette approche? Le ferais-tu? Y a-t-il des pièges?

Answer 1

Je pense que vous avez plusieurs options ici:

1. Utilisation Less CSS qui offre des capacités d'héritage et mixins dans votre CSS
2. système Utilisez Grid 960 pour établir des règles CSS sémantiques (comme vous l'avez pour flotter
3. Définissez des classes sémantiques pour vos éléments afin d'adresser plusieurs éléments à la fois, et bien sûr, d'adresser un élément via plusieurs classes. Par exemple, un élément pourrait avoir ces classes: class = « float gauche bouton largeur 10 »

Mais attention à ne pas être pris au piège dans le concept de divities et classities

Answer 2

La plupart du temps, vous avez la plupart de vos CSS dans quelques feuilles externes qui sont utilisées par chaque page. Ceux-ci sont mis en cache de sorte qu'ils n'ont besoin d'être chargés qu'une seule fois. En outre, vous ne devriez pas sacrifier la lisibilité de votre balisage ou css pour un boost de performance à peine perceptible. Le balisage sémantique est la clé.

Answer 3

C'est en fait la bonne approche. L'utilisation de l'héritage à travers la classe CSS ne se limite pas à votre feuille de style, mais la rend également gérable. En outre, vous devrez peut-être réduire votre css dans votre sortie finale, afin de maximiser ses performances.

Answer 4

Je recommande regardant sérieusement à utiliser quelque chose comme Saas pour css

plus maniable et facile à lire Si vous êtes préoccupé par la taille du fichier de vous Css fichiers pour des raisons de performances, vous devriez envisager de minimiser le css avec quelque chose comme YUI Compressor

Answer 5

Si vous voulez réduire la quantité de CSS sur votre site, vous devriez regarder CSS orienté objet. Voici une rapide introduction:

http://net.tutsplus.com/articles/lectures/the-top-5-mistakes-of-massive-css/

Il utilise Facebook comme un exemple et comment ils ont réduit leur CSS ...

Answer 6

Même si les spécifications HTML ultérieures finissent par parler très peu de l'attribut class, nous pouvons voir à travers les spécifications et les discussions antérieures qu'il y a une signification plus profonde. L'idée fondamentale derrière l'attribut HTML class est de sous-classer sémantiquement les éléments HTML. Ces pseudo-éléments sont utiles pour l'application que vous avez en tête, c'est-à-dire pour préciser le type de données inclus dans une variable. Cela signifie fournir des données sur les données. Ces données sont appelées metadata. Les feuilles de style sont simplement une application de l'attribut class. Que les feuilles de style puissent profiter de cela n'est qu'une heureuse conséquence. L'attribut HTML class est destiné à la sémantique, et non à des fins de style.

Si vous ajoutez des classes uniquement à des fins de présentation et pour réduire la taille de vos fichiers CSS, vous abusez des classes.

Notez qu'il y a plus de performances CSS que la taille de téléchargement. La performance de rendu peut être plus importante à long terme. Je vous suggère de faire ce qui suit:

• Utilisez un outil comme Speed Tracer ou Page Speed pour analyser les performances de votre site
• Réduisez vos fichiers CSS
• Retirer CSS
• utilisé utiliser certains des cadres CSS qui ont été énumérés dans d'autres réponses à cette question

pour en savoir plus sur les performances que je recommande vivement la session MIX11 "50 Performance Tricks to Make Your HTML5 Web Sites Faster ". C'est à voir absolument!

Vous pouvez également partager des styles entre les différentes classes à l'aide grouping:

.a 
{ 
    /* Other properties */ 
} 
.b 
{ 
    /* Other properties */ 
} 
.c 
{ 
    /* Other properties */ 
} 

.a, .b, .c 
{ 
    float: left; 
} 

J'ai beaucoup écrit sur le but de l'attribut de classe HTML dans mon blog « The HTML class attribute: for styling purposes only? » si vous êtes intéressé.