Qu'est-ce que le style CSS Quicker/More Efficient

Question

J'ai été curieux de savoir quelle méthode de style CSS est la plus rapide (rendu sage) et ensuite simplement d'un point de vue des meilleures pratiques quelle méthode a plus de sens (assez subjective je dirais?) .

Je peux créer des classes de base comme:

.rounded-corners-5 { 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
} 

OU

que je peux faire d'autre méthode d'application des styles à plusieurs ID/Classes:

#box1, #header, #container, .titles { 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
} 

Answer 1

Je suis d'accord avec tster: le premier consiste à introduire une commande visuelle dans le code HTML (attention aux classes dont le nom décrit leur apparence plutôt que leur but). S'il a un but logique (par exemple, une section), il peut être plus propre. Sinon, j'utiliserais la deuxième version. Ce qui vous fait vraiment souffrir est le manque d'abstraction en CSS, ce qui signifie que vous avez tendance à souffrir de duplication et/ou de groupements impairs pour éviter la duplication. Vous voudrez peut-être regarder this article about Sass. L'idée générale est que vous écrivez un document Sass (qui n'est pas tout à fait CSS mais similaire) qui est ensuite compilé dans un document CSS que vous déployez ensuite.

Answer 2

je serais toujours utiliser la deuxième méthode, cela me semble plus logique. Je ne sais pas si c'est plus rapide à rendre, mais il est plus net dans le fichier, et il conserve tous les identifiants/classes associés.

Answer 3

La première méthode fonctionne plus rapidement si vous ne vous retrouvez pas avec plusieurs ID et classes sur un élément, car vous pouvez plus facilement vous souvenir de ce que les classes/ID font lorsque vous éditez votre code HTML ou serveur . Cependant, je ne sais pas lequel rend le rendu plus rapide, et cela peut même être subjectif à beaucoup de choses, comme le navigateur, l'âge de l'ordinateur, etc., car je ne sais rien des internes des algorithmes de rendu dans le différents moteurs de rendu (pas que je pourrais jamais connaître 2 d'entre eux que nous connaissons tous et que nous détestons sans changer d'emploi ...).

Answer 4

Je ne sais pas lequel serait rendu plus rapidement. Mais du point de vue de la maintenance, je voudrais haïr en utilisant la deuxième option car cela signifierait que l'élément #header pourrait avoir des règles définies dans de nombreux endroits différents dans le CSS. Je ne voudrais pas avoir à le traquer chaque fois que je voulais faire un changement.

Answer 5

Je ne pense pas que la syntaxe soit si importante pour la vitesse.

La performance est plus à propos de quand le navigateur doit faire des repeints. Ce qui se passe sur des événements tels que :hover ou lorsque des modifications sont apportées au DOM. Les repeints sur les éléments positionnés absolute ou fixed seraient les plus rapides, car il y a moins à repeindre - car ils ne sont pas en ligne, donc vous n'aurez pas à repeindre les éléments surround.

Vous pouvez utiliser le module complémentaire Google Page Speed pour que Firebug puisse voir les repeints se produire.

Je crois que plus de navigateurs utiliseront l'accélération matérielle pour ce genre de choses, ce qui devrait accélérer énormément les choses. En ce qui concerne la syntaxe, j'utiliserais des classes et des id qui décrivent le contenu ou l'utilisation de l'élément (comme votre deuxième exemple). Maintenant vous ne devez pas changer votre code HTML quand vous décidez que tous les éléments avec la classe .rounded-corners-5 devraient avoir border-radius: 10px. Gardez le style et la structure à part.

Answer 6

Le plus efficace est celui qui prend moins d'espace et accélère le chargement de la page Web.

Ceci aide également avec l'optimisation de Search Engine (SEO).

Answer 7

En ce qui concerne le style, écrivez votre code html pour être fonction uniquement, et écrivez CSS pour ajouter un formulaire. Donc, pour Ids, ils devraient identifier l'élément. Aller dans l'autre sens, essentiellement écrire le style dans le HTML par exemple. .blue{color:blue} qui va simplement encombrer votre code HTML avec des classes. Le but de CSS est de vous permettre d'échanger des feuilles CSS et d'avoir un contrôle total sur l'aspect et la convivialité.