QA@IT

cssのメディアクエリーの書き方とファイルの分け方はどのようにすればいいですか。

2235 PV

現在レスポンシブなサイトを作りたくて、サイトを作成しているのですが、
cssの書き方として皆様がどのように書いてるのか気になり質問させていただきます。

PCをベースにcssを作成していて、それをレスポンシブ対応を考えています。
どのように書いていくのがスマートに掛けるかで悩んでいます。
cssのファイルが増えていくので、PCとスマホで表示の差分を最小限にしながら行う方法を模索しています。
下記の様なパターンは思いつくのですが、なにかアドバイスを頂ければ幸いです。
※railsでscssを用いています。

書き方1

同じ要素の同じ階層に書いていく。

#item{
     background: #f0f;
     margin:30px;

     @media screen and (min-width: 900px) {
            margin:0px;
     }
}

書き方2

#item{
    background:#f0f;
    margin:30px;
}

@media screen and (min-width: 900px) {
    #item{
        margin:30px;
     }
}

書き方3

ファイルを分割する。PCで使っていて、レスポンシブが必要な要素をとりだして書いていく。

アドバイスだけでも頂けると幸いです。以上よろしくお願い致します。

ウォッチ

この質問への回答やコメントをメールでお知らせします。