Grid-Media IN vs OUT

Question

私と同僚は、Neat Grid-Mediasを使用する最良の方法について永遠の議論に入りました。

は以下のapprouchを考えてみましょう：

Approuch A：

.mydiv { 
    font-size: 14px; 

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

次に、この考慮してください。

Approuch B：ネア上

.mydiv { 
    font-size: 14px; 
} 

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

テストをtは、両方のapprouchs同じ結果にレンダリング、私はここに置くことはありませんので、明らかです。

私の質問は何ですか：あなたは何を好きですか？ ThoughtBotが提案する「より良い」アプローチがありますか？ 誰かから提案された「より良い」アプローチがありますか？ 他のものの代わりに1つを使用する理由はありますか？ それはちょうどスタイルの問題？ 誰かが豊富なライフ・ステートメントを提供するために両方を使用していますか？私たちが今まで推測何

：Approuch Aでは

は、我々はいくつかありますが、コードの読み取りが困難とより肥大化すること、私たちのページにグリッドのメディアが含まれます。 反対側では、すべてのグリッド・メディアが1つのルールに集中し、同じルールが各グリッド・メディアのドキュメントに対して繰り返されません。

Approuch Bでは、各ブレークポイントごとに各グリッドメディアの単一のブロックがあるため、コードがはるかに短くなりますが、要素クラスが表示される場所も掛けられます。

また、この同僚がこれを読んでいる場合は、自分の道が良かったことを発見することを楽しみにしています。 （はい、私はあなたにどちらかを教えません）

Answer 1

こんにちは！

ここでは、コードスタイルはチームのことだと言って前に説明します。私たちのために働くものは、あなたのために働かないかもしれません。何よりも、一貫性と共通の理解が重要です。雑草にはあまり時間をかけないでください。それは言われて、私たち（thoughtbotは）（あなたの「アプローチA」）our code style guidesを公開し、この構文を好む：

.mydiv { 
    font-size: 14px; 

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

なぜ？ mydivは、あなたがスタイリングしているものであり、メディアクエリ自体ではありません。したがって、1つの宣言ブロック内のそのセレクタに関連するすべてのスタイルを網羅することは、多くの明快さを提供します。セレクタに影響するスタイルを複数のブロックに分散させると、解読が難しくなります。