Bonjour à tous,
En ce mois d’août bien (trop) calme au niveau culturel j'ai le temps de me casser un peu la tête avec des préoccupations macro-importantes. Parce que oui, c'est important la performance CSS. Mais bon, je chipote surement là pour le gain de fractions de microsecondes...
Bref, voici la problématique que j'expose.
CAS 1 : suite à l'utilisation de la fonctionnalité "extend" des préprocesseurs afin d'appliquer un même style à plusieurs éléments
CAS 2 : création d'une classe générique qui sera ajoutée à ces éléments.
ANALYSE :
Il est important de noter que dans un cas comme dans l'autre nous avons une factorisation du style.
Dans le premier cas, cela se traduit par une atomisation du balisage CSS.
Dans le second cas, cela se traduit par une atomisation des sélecteurs.
Pour rappel, le moteur de rendu des principaux navigateurs lisent les sélecteurs CSS de droit à gauche. Dans un cas comme dans l'autre la "clé de sélection" permet directement d'identifier un style CSS.
Là où pourrait se faire la différence serait sur le nombre de parcours du DOM effectué par le moteur de rendu.
Dans le premier cas, ce dernier effectue trois passages (un par sélecteur) trouvant à chaque fois un élément à qui appliquer le style.
Tandis que dans le second cas, un seul parcours de l'arbre sera effectué permettant de trouver trois éléments à qui appliquer le style.
Ai-je bon dans cette analyse ?
En ce mois d’août bien (trop) calme au niveau culturel j'ai le temps de me casser un peu la tête avec des préoccupations macro-importantes. Parce que oui, c'est important la performance CSS. Mais bon, je chipote surement là pour le gain de fractions de microsecondes...
Bref, voici la problématique que j'expose.
CAS 1 : suite à l'utilisation de la fonctionnalité "extend" des préprocesseurs afin d'appliquer un même style à plusieurs éléments
.foo {
Content: “foo”;
}
.foo2 {
Content: “foofoo”;
}
.foo3 {
Content: “foofoofoo”;
}
.foo,
.foo2,
.foo3 {
Float: left;
}
<div class=”foo”></div>
<div class=”foo2”></div>
<div class=”foo3”></div>
CAS 2 : création d'une classe générique qui sera ajoutée à ces éléments.
.foo {
Content: “foo”;
}
.foo2 {
Content: “foofoo”;
}
.foo3 {
Content: “foofoofoo”;
}
.bar {
Float: left;
}
<div class=”foo bar”></div>
<div class=”foo2 bar”></div>
<div class=”foo3 bar”></div>
ANALYSE :
Il est important de noter que dans un cas comme dans l'autre nous avons une factorisation du style.
Dans le premier cas, cela se traduit par une atomisation du balisage CSS.
Dans le second cas, cela se traduit par une atomisation des sélecteurs.
Pour rappel, le moteur de rendu des principaux navigateurs lisent les sélecteurs CSS de droit à gauche. Dans un cas comme dans l'autre la "clé de sélection" permet directement d'identifier un style CSS.
Là où pourrait se faire la différence serait sur le nombre de parcours du DOM effectué par le moteur de rendu.
Dans le premier cas, ce dernier effectue trois passages (un par sélecteur) trouvant à chaque fois un élément à qui appliquer le style.
Tandis que dans le second cas, un seul parcours de l'arbre sera effectué permettant de trouver trois éléments à qui appliquer le style.
Ai-je bon dans cette analyse ?
