media - メディアクエリの書き方の違いは何ですか

Question

デスクトップ用のウェブサイトを直接コーディングする人もいれば、すべてのスタイルに憤慨した後、デスクトップ、タブレット、電話用のメディアクエリで直接コーディングを開始する人もいます。ベストプラクティスはありますか、それとも好みですか?

 wrapper {
    width: 85%;
    margin: 0 auto;
    font: 90% Georgia, "Times New Roman", Times, serif;
     }
     .col1 {
    float: left;
    width: 40%;
    margin-right: 5%;
     }
    .col2 {
    float: left;
    width: 25%;
    margin-right: 5%;
      }
     .col3 {
    float: right;
    width: 25%;
     }






 @media screen and (max-width: 1280px)

    wrapper {
        width: 85%;
        margin: 0 auto;
    font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
    float: left;
    width: 40%;
    margin-right: 5%;


.
..
...


}

また、たとえば 5 つの異なるページのメディア クエリを記述した場合

 @media screen and (max-width: 1280px)


    /* Main Page */

    wrapper {
    width: 85%;
    margin: 0 auto;
    font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
    float: left;
    width: 40%;
    margin-right: 5%;



/* Gallery */
/* Contacts */

失敗が大きくなり、迷子にならないようにコメントを使用するのが最善の方法ですか?