異なるメディアクエリの要素に重複する値

Question

私は巨大なメディアクエリをクリーンアップしようとしています。代わりに、これが表示されるように、デフォルトの要素値と同じ要素値のすべての変更を削除しました。

私の質問は、重複した値が個々のメディアクエリに格納されているときの私の選択肢ですか？ここで

は一例です。

@media only screen and (min-width: 480px) and (max-width: 767px) { 
.fa.fa-check 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-shopping-cart 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-user 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 

@media only screen and (max-width: 479px) { 
.fa.fa-check 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-shopping-cart 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-user 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 

私は同様にメディアクエリの内部で重複していない要素の値の変化がたくさんあるので、私は一緒にすべてを組み合わせることはできません。他の選択肢はありますか？

Answer 1

正確なコードベース（または実際の例）を見ずに仕様を支援するのは難しいです。上記の例だけで、これらの要素のそれぞれに基本クラスを持たせることをお勧めします。そうすれば、それらのスタイルを何度も何度も繰り返すことはありません。

編集：基本クラスを使用する例として、上記のコードを作成し、それらのスタイルプロパティ（すべてのアイコン要素）を使用する各要素に追加することができます：

.standard-icon { 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 

これにより、重複したコードがなくなり、よりモジュラーなサイトデザインが作成されます。

メディアクエリ/重複値に関する限り、ここでは、私が働いているサイトでレスポンシブアイテムを扱う方法を説明します。主なデバイスサイズは、私が考えると、desktop,tablet、mobileの3種類あります。私はアイコンを作成していますのであれば、二つ以上のデバイス・サイズ全体のデフォルトのスタイリングと例えば、私は次の操作を行います：

/* Default styling */ 
.icon-example { 
    width: 40px; 
    height: 40px; 
    margin: 40px 0; /* Style which spans two or more queries */ 
    color: white; 
    background: black; 
} 

@media @mobile-grid { 
    margin: 30px 0; /* Overriding this style only on mobile */ 
} 

今、私はすべてのメディアクエリのmargin値を宣言する必要はありません異なっているもののためにそれを上書きするだけです。また、SassやLESSのようなCSSプリプロセッサを調べて使用することをおすすめします。彼らは驚くほど使いやすく、コードをできるだけDRYに保ちます。がんばろう！