RWD @media, class 巢狀寫法的優劣

問題: media, class的巢狀寫法的比較

A寫法

.haha_class { 
  @media(min-width: 400px) {} 
  @media(min-width: 800px) {} 
}

B寫法

@media(min-width: 400px) {
  .haha_class
} 
@media(min-width: 800px) {
  .haha_class
}

自己的看法，我偏向A寫法，因為覺得這樣比較像是在定義一個物件的 style，與 haha_class 相關的都寫在一起這麼做會在很多地方寫很多次 @media，不過debug比較方便，因為都寫在一起，比較好找但也可能會出現類似下面的狀況，變成很多層，這也許可以用 sass 的 mixin 去改善可讀性

.haha_class { 
  @media(min-width: 400px) {} 
  @media(min-width: 800px) {} 
  .keke_class { 
    @media(min-width: 400px) {} 
    @media(min-width: 800px) {} 
  }
}

話說前端正在走向component，style會被寫成inline style寫在 component 中，A寫法看來比較接近這個趨勢

kei 看法: A寫法維護或debug 比較快速但 compiler 出來的 code 會比較髒但因為都會 minify 所以我沒有很care，但一個範圍內很多個 media query 就會看的很累

如果很在乎最後 code 的乾淨程度可以使用 b 但維護時稍微麻煩用一個 media query 去處理的好處就是最後的code會比較乾淨一些而已

softnshare / htmlcss

RWD @media, class 巢狀寫法的優劣 #12