Est-il préférable d'utiliser des mixins ou des ensembles de styles combinés dans des feuilles de style?

Question

Je voudrais savoir quelle est la meilleure façon de coder les feuilles de style en termes de performances, de lisibilité et de cas d'utilisation au quotidien.

Disons que nous voulons faire des styles:

.container { 
    background-color: red; 
    .nested-container { 
    color: blue; 
    } 
} 

.container-two { 
    background-color: black; 
    .nested-container { 
    color: blue; 
    } 
} 

Je me demande de quelle manière est plus efficace pour ce genre de cas.

/* mixins way */ 
@mixin duplicated-container { 
    .nested-container { 
     color: blue; 
    } 
} 

.container { 
    background-color: red; 
    @include duplicated-container; 
} 
.container-two { 
    background-color: black; 
    @include duplicated-container; 
} 

/* combined sets way */ 
.container { 
    background-color: red; 
} 
.container-two { 
    background-color: black; 
} 
.container, 
.container-two { 
    .nested-container { 
    color: blue; 
    } 
} 

La première façon est beaucoup plus lisible, au moins pour moi. La deuxième façon rend le fichier de sortie plus petit que lorsque vous utilisez mixins, car le code n'est pas dupliqué de quelque façon que ce soit. S'il vous plaît gardez à l'esprit que c'est juste un exemple très simple de ce que je veux atteindre, si container et container-two sont à deux endroits différents dans le fichier, d'abord le rend très lisible et facile à jouer, mais il duplique code dans la sortie finale, donc je ne suis pas sûr si c'est bon d'utiliser mixins de cette façon.

Cela a été un gros dilemme pour moi ces derniers jours et j'ai décidé de demander de l'aide aux professionnels, parce que je finis toujours avec des feuilles de style en désordre. J'apprécie toute aide.

Answer 1

Le premier semble être un meilleur choix, puisque classes sont répertoriées dans un seul endroit. Avec la deuxième approche, une fois que vous avez ajouté un .container-three, vous devez vous souvenir de l'ajouter également à la liste des classes sous lesquelles .nested-container obtient ses styles à partir de .container-three.

Vous ne devriez pas vous soucier de la taille du fichier lorsque vous utilisez des mixins. Avec un pipeline moderne de CSS minifier et le contenu gzipped étant par défaut pour la plupart des serveurs, la duplication du contenu en CSS n'augmente pas significativement la taille du fichier, et might even perform better.

Ne vous inquiétez pas de la duplication de code. C'est une micro-optimisation qui serait fortement optimisée par gzip de toute façon. Aller pour la lisibilité dans ce cas.