如何優化這個SASS媒體查詢？

我有id #wants-to-meet在1150px我想改變它的CSS。如何優化這個SASS媒體查詢？

與媒體

通常查詢所有我需要做的只是針對ID
，有時我需要寫類似'parent-selector > targeted-selector'

但是我的媒體查詢是讓劃掉/否定某種原因： enter image description here

出於某種原因，我需要去此深讓它改變：

@media all and (max-width: 1150px) { 
      #li-affiliate-incoming-msg { 
       #message_container { 
        #td-details { 
         #request_details { 
          #wants-to-meet { 
           margin-top: 5px; 
           margin-right: 0; 
           padding: 8px 20px 3px 20px; 
           color: blue; 
           background: red; 
          } 
         } 
        } 
       } 
      } 
     }

我使用的是SASS，而我的#wants-to-meet ID嵌套了8個標籤深度，這可能是爲什麼？

你知道這是爲什麼嗎？

來源

2013-07-01 Leon Gaban

注意：對於我試圖在媒體查詢中更改的所有選擇器，我必須從「＃li-affiliate-incoming-msg'' –

這種糟糕的嵌套排泄。只嵌套三到四個層次是一個很好的經驗法則。如果您在標記中使用ID，則根本沒有理由嵌套，因爲ID只能出現一次。的

基本上不是說#wants-to-meet到瀏覽器，你說#wants-to-meet（瀏覽器說：好，我知道）這就是#request_details一個孩子（瀏覽器說：好，我知道）這就是#td-details（瀏覽器有一個孩子說好，我知道它是）#message_container（瀏覽器說好，得到它）的孩子，這是一個孩子#li-affiliate-incoming-msg（瀏覽器說好，得到它）。

這是多餘的。熟悉CSS具體位置：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

旁註：這是可怕的實踐來命名類或ID與html元素，你似乎已經與#li-affiliate-incoming-msg

來源

2013-07-01 20:04:07 imjared

！是的，這是有道理的......我想我喜歡以視覺上有組織的方式編寫CSS/SASS。這對我來說很有意義，並且可以快速找到我需要的選擇器。嗯，我會重新組織我的SASS，以免嵌套過於瘋狂。並感謝鏈接！ –

這超出了這個問題的範圍，但你可能想研究SASS內的嵌套媒體查詢。可以幫助你很多。 – imjared

謝謝我發現這個鏈接http://designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do/ –

只要有可能，你應該只使用id選擇器，無論你是什麼樣式的元素 - 應該足夠具體，因爲你不能多次使用相同的id。

#wants-to-meet {

但是，你需要確保你指的是元素這樣無處不在 - 作爲選擇的一個更具體的版本會給你級聯困境。

我相信風格被刪除的原因是因爲標準版本border-radius被支持 - 所以-moz版本被標準版本覆蓋。

來源

2013-07-01 20:02:36 Fenton

你的CSS做了線1776爲more specific比規則1900行;這就是1900年的宣言全部被刪除的原因。當然，這種特異性來自於非常深的薩斯。

來源

2013-07-01 20:04:32 KatieK

問題是，有more specific selector因此是不夠的。

一個髒修復將是：

#wants-to-meet { 
    some-prop: value !important; 
}

要覆蓋更具體的匹配值。儘管如此，你應該通讀並瞭解所有關於specificity的信息，以瞭解哪條路徑最適合你，以及爲什麼。

來源

2013-07-01 20:04:38 Matyas

告訴某個明顯不明確使用特殊性的人！重要的是徹底的罪惡。 – imjared

啊謝謝！ :)雖然現在我明白了@imjared的感謝，我以這種方式編寫我的SASS，因爲它幫助我可視化地組織一切。我現在必須進一步優化它： –

我意識到這一點，更新了一個建議的答案，我只是想把它列爲一個簡短（危險的）選擇。 – Matyas

如何優化這個SASS媒體查詢？

回答

相關問題