メディアクエリを使用して既定のスタイルをオーバーライドする方法

Question

長いscssコードで申し訳ありませんが、これはフッタデザインのCSS構造です。デフォルトのCSSコードはうまく機能していますが、私はを書く必要があります！重要なメディアクエリのすべてのCSSプロパティの後に、メディアクエリのほとんどのケースで私は書く必要があります！この！重要なキーワードを取り除くために私を助けるか、誰もが1はSCSS/CSSコードを構造化する方法を支援することができますが正しく

.footerWrapper { 
      display: flex; 
      flex-direction: column; 

      .topBlock { 
      max-width: 100%; 
      display: flex; 
      padding: 20px 30px; 
      flex-direction: row; 
      border: 1px solid $color-border; 
      background-color: $color-bg-footer; 
      flex-wrap: wrap; 

      .leftTop { 
       width: 40%; 
       .heading { 
       font-weight: bold; 
       font-size: 24px; 
       color: $color-body 
       } 

       .small { 
       font-size: 14px; 
       color: $color-body-light; 
       text-align: left; 
       } 
      } 

      .iconBlock { 
       display: flex; 
       flex-direction: row; 
       padding-left: 25px; 
       align-items: center; 
       width: 50%; 
       justify-content: space-between; 

       .iconBox { 
        display: flex; 
        flex-direction: row; 
        align-items: center; 
       } 
       .iconStyle { 
        border-radius: 50%; 
        border: 2px solid $color-border; 
        width: 45px; 
        height: 45px; 
        .innerIcon { 
         line-height: 44px; 
         display: flex; 
         font-size: 20px; 
         align-items: center; 
         flex-direction: column; 
        } 
       } 

       .iconText { 
       display: flex; 
       flex-direction: column; 
       margin-left: 18px; 

       .iconSmallText { 
        font-weight: 600; 
        font-size: 12px; 
        color: $color-body-light; 
        text-align: left; 
        text-transform: uppercase; 
       } 

       .iconLargeText { 
        font-weight: bold; 
        font-size: 21px; 
        color: $color-body; 
        text-align: left; 
       } 
       } 
      } 
      } 

      .secondBlock { 
      max-width: 100%; 
      background-color: $color-bg-primary; 
      display: flex; 
      flex-wrap: wrap; 
      padding: 42px 30px; 
      justify-content: space-around; 
      } 

      .thirdBlock { 
      display: flex; 
      flex-direction: row; 
      width: 80%; 
      margin: 0 auto; 
      justify-content: space-around; 
      padding: 20px 30px; 

      .subscribeBlock { 
       max-width: 50%; 
       display: flex; 
       flex-direction: column; 
       align-items: center; 
      } 

      .social { 
       display: flex; 
       flex-direction: column; 
       .socialText { 
        font-size: 15px; 
        color: $color-body; 
        margin-bottom: 16px; 
        font-weight: 600; 
        text-transform: uppercase; 
       } 
      } 
      .socialAndApp { 
       display: flex; 
       flex-direction: row; 
      } 

      .logoText { 
       font-size: 15px; 
       color: $color-body; 
       margin-bottom: 16px; 
       font-weight: 600; 
       text-transform: uppercase; 
      } 
      } 

      .fourthBlock { 
      max-width: 100%; 
      background-color: $color-brand-primary; 
      padding: 20px 30px; 
      display: flex; 
      justify-content: space-between; 
      flex-direction: row; 

      .bottomLeft { 
       display: flex; 
       flex-direction: row; 
       .cards { 
        margin-left: 20px; 
       } 
       .reservedBlock { 
        display: flex; 
       } 
       .reservedText { 
        font-size: 13px; 
       } 
      } 

      .bottomRight { 
       width: 100%; 
       max-width: 500px; 
       text-transform: capitalize; 
       display: flex; 
       color: $color-body; 
       font-size: 13px; 
       justify-content: space-between; 
      } 
      } 
      .linksBlock { 
      display: flex; 
      justify-content: center; 
     } 

     .bottomPanel { 
      padding: 14px 29px 16px; 
      font-size: 13px; 
      display: flex; 
      flex-direction: row; 
      align-items: center; 
      justify-content: center; 
      color: $color-body; 
     } 

     .bottomBlock { 
      cursor: default; 
      text-align: center; 
     } 


     .block { 
      min-width: 137px; 
      padding-right: 72px; 
     } 
     .link { 
      display: block; 
      margin: 2px 0 0; 
      text-transform: capitalize; 
      font-size: 13px; 
      line-height: 2.38; 
      color: $color-body; 
      text-decoration: none; 
     } 
     .title { 
      text-transform: uppercase; 
      font-size: 15px; 
      font-weight: bold; 
      line-height: 1.46; 
      color: $color-body; 
      cursor: default; 
      margin-bottom: 18px; 
     } 
     } 

     //for xs mobile screen 
     .footerWrapper { 
      @media #{$max-mobile}{ 
       .leftTop { 
        width: 100% !important; 
        margin-bottom: 27px; 
       } 
       .iconLargeText { 
        font-size: 16px !important; 
       } 
       .heading { 
        font-size: 19px !important; 
       } 
       .topBlock { 
        flex-direction: column; 
       } 
       .iconBlock { 
        padding-left: 0 !important; 
        flex-direction: column !important; 
        align-items: flex-start !important; 
       } 
       .cards { 
        margin-left: 0 !important; 
       } 
       .bottomLeft { 
        display: flex; 
        flex-direction: column !important; 
        align-items: center !important; 
       } 
       .bottomRight { 
        flex-wrap: wrap; 
        margin-top: 18px; 
        line-height: 23px; 
        justify-content: space-around !important; 
       } 
       .subscribeBlock { 
        max-width: 100% !important; 
       } 
       .social { 
        margin-top: 25px; 
       } 
       .socialText { 
        text-align: center; 
        font-size: 12px !important; 
       } 
       .appLogo { 
        margin-top: 18px; 
       } 
       .logoText { 
        font-size: 12px !important; 
        text-align: center !important; 
       } 
      } 
     } 

     //Screen for tablet view 
     .footerWrapper { 
      @media only screen and (min-width: 768px) and (max-width: 1024px) { 
       .leftTop { 
        width: 100% !important; 
        margin-bottom: 27px; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
       } 
       .iconLargeText { 
        font-size: 17px !important; 
       } 
       .block { 
        min-width: 100px !important; 
        padding-right: 45px; 
       } 
       .heading { 
        font-size: 19px !important; 
       } 
       .iconBlock { 
        padding-left: 0 !important; 
        flex-direction: row; 
        width: auto !important; 
        justify-content: space-around !important; 
       } 

       .fourthBlock { 
        flex-direction: column; 
        align-items: center !important; 
       } 
       .cards { 
        margin-left: 0 !important; 
       } 
       .bottomLeft { 
        display: flex; 
        flex-direction: column !important; 
        align-items: center !important; 
       } 
       .subscribeBlock { 
        max-width: 100% !important; 
        padding-bottom: 25px !important; 
       } 

       .socialAndLogo { 
        display: flex !important; 
        flex-direction: row !important; 
        justify-content: space-around !important; 
       } 
      } 

     } 
@media only screen and (min-width: 769px) { 
    .socialAndLogo { 
     display: flex ; 
     flex-direction: row ; 
    } 
} 


//Screen for tablet view 
.footerWrapper { 
    @media only screen and (min-width: 768px) and (max-width: 1024px) { 
     .leftTop { 
      width: 100% !important; 
      margin-bottom: 27px; 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
     } 
     .iconLargeText { 
      font-size: 17px !important; 
     } 
     .block { 
      min-width: 100px !important; 
      padding-right: 45px; 
     } 
     .title { 
      font-size: 14px; 
     } 
     .heading { 
      font-size: 19px !important; 
     } 
     .topBlock { 
      flex-direction: column; 
     } 
     .iconBlock { 
      padding-left: 0 !important; 
      flex-direction: row; 
      width: auto !important; 
      justify-content: space-around !important; 
     } 
     .iconBox { 
      margin-bottom: 16px; 
     } 

     .fourthBlock { 
      flex-direction: column; 
      align-items: center !important; 
     } 
     .reservedBlock { 
      flex-direction: column; 
      .reservedText { 
       text-align: center; 
       padding-bottom: 11px; 
      } 
     } 
     .cards { 
      margin-left: 0 !important; 
     } 
     .bottomLeft { 
      display: flex; 
      flex-direction: column !important; 
      align-items: center !important; 
     } 
     .bottomRight { 
      flex-wrap: wrap; 
      margin-top: 18px; 
      line-height: 23px; 
      justify-content: space-around !important; 
     } 
     .reservedText { 
      margin-top: 20px; 
     } 
     .thirdBlock { 
      display: flex; 
      flex-direction: column; 
     } 
     .subscribeBlock { 
      max-width: 100% !important; 
      padding-bottom: 25px !important; 
     } 

     .socialAndLogo { 
      display: flex !important; 
      flex-direction: row !important; 
      justify-content: space-around !important; 
     } 
     .block:nth-child(4) { 
      display: none; 
     } 
     .block:nth-child(5) { 
      display: none; 
     } 
    } 

} 


@media only screen and (min-width: 1200px) and (max-width: 1500px) { 
    .bottomRight { 
     margin-right: 114px; 
    } 
} 

@media only screen and (min-width: 1024px) and (max-width: 1439px) { 
    .block:nth-child(4) { 
     display: none; 
    } 
    .block:nth-child(5) { 
     display: none; 
    } 
} 

@media only screen and (min-width: 1500px) { 
    .topBlock, .fourthBlock { 
    padding: 20px 190px !important; 
} 
} 

Answer 1

一般的な答えはspecificity、トンであります彼はメディアのクエリのルールは元のルールよりも低い特異性を持っています。

すなわち、このルールでは.topblock {...}

@media only screen and (min-width: 1500px) { 
    .topBlock, .fourthBlock { 
    padding: 20px 190px !important; 
} 
} 

、一つのクラスしか持っていますが、その元のルールは次のように行う、2クラスだから、メディアクエリで動作させるための

.footerWrapper .topBlock {...}を持っているように見えます

@media only screen and (min-width: 1500px) { 
    .footerWrapper .topBlock, .footerWrapper .fourthBlock { 
    padding: 20px 190px; 
} 
}