Grid-Media IN vs OUT

Question

Moi et un collègue sommes entrés dans une éternelle discussion sur la meilleure façon d'utiliser Neat Grid-Medias.

Tenir compte de la approuch suivante:

Approuch A:

.mydiv { 
    font-size: 14px; 

    @include grid-media($somegridvar) { 
    font-size: 18px; 
    } 
} 

Alors, considérez ceci:

Approuch B:

.mydiv { 
    font-size: 14px; 
} 

@include grid-media($somegridvar) { 
    .mydiv { 
    font-size: 18px; 
    } 
} 

Test sur Nea t, les deux approuches rend au même résultat, que je ne mettrai pas ici car c'est évident.

Ma question est: Qu'est-ce que vous préférez? Il y a une "meilleure" approche suggérée par ThoughtBot? Il y a une "meilleure" approche suggérée par quelqu'un? Il y a une raison d'utiliser l'un plutôt que l'autre? C'est juste une question de style? Quelqu'un a utilisé à la fois pour fournir une déclaration de vie enrichie?

Ce que nous déduisons jusqu'à présent:

En Approuch A, nous aurons plusieurs médias comprend de la grille sur nos pages, ce qui rend le code plus difficile à lire et plus pléthorique. De l'autre côté, tous les médias de grille seront centrés dans une règle unique, et la même règle ne sera pas répétée sur le document pour chaque média de grille.

Dans l'Approche B, nous aurons un seul bloc de chaque média-grille pour chaque point d'arrêt, ce qui se traduira par un code beaucoup plus court, mais aussi en multipliant les endroits où les classes d'éléments apparaissent.

Aussi, si ce collègue est en train de lire ceci, je suis impatient de découvrir que mon chemin était le meilleur. (oui, je ne vous dirai pas lequel)

Answer 1

Hi!

Je vais commencer par dire que le style de code est une chose d'équipe. Ce qui fonctionne pour nous, peut ne pas fonctionner pour vous. Surtout, la cohérence et une compréhension partagée sont vraiment ce qui compte. Ne passez pas trop de temps dans les mauvaises herbes, petits détails. Cela étant dit, nous (thoughtbot) et publions our code style guides préfère cette syntaxe (votre « approche A »):

.mydiv { 
    font-size: 14px; 

    @include grid-media($somegridvar) { 
    font-size: 18px; 
    } 
} 

Pourquoi? mydiv est la chose que vous stylisez, pas la requête média elle-même. Donc, englobant tous les styles qui se rapportent à ce sélecteur dans un bloc de déclaration fournit beaucoup de clarté. Avoir des styles qui affectent le sélecteur répartis sur plusieurs blocs peut devenir difficile à déchiffrer.