CSS優先順序

Question

所以我目前正在構建一個允許CSS存儲在MariaDB（MySQL）數據庫中的系統。我目前正在爲此進行邏輯流程，並且想知道媒體查詢方面哪些更可取。

所以，我真正想知道的是;

我應該加載CSS文件頂部的媒體查詢還是加載CSS文件頂部的非媒體查詢選擇器？哪一個更好？或者這是主觀的，因爲事物被頁面下方的代碼覆蓋。

在此先感謝大家。

Answer 1

其實這可能是主觀的，但是，這是最好的做法。

我更喜歡將正常的CSS選擇器保存在app.scss之類的文件中，並在開發時將媒體查詢保存在responsive.scss之類的其他文件中。所以即使將所有模塊分開也更好。但最後，您需要將它們連接起來，最好的辦法是先保留常規CSS選擇器，然後再加載媒體查詢。

@import 'custom/app'; 
@import 'custom/responsive'; 

之所以要遵循這種做法是CSS將從上到下閱讀，因此，您可以瞭解到所有媒體的查詢規則將原來的規則之後立即暗示，它不會影響響應。

總而言之，這可能是非常主題，也可能是其他開發人員更願意將他們的CSS和媒體查詢CSS規則一個接一個編寫出來，但很明顯他們最有可能在主規則之後正確編碼媒體查詢。爲了澄清，我會在我的視野只寫一個示例代碼：

GOOD

body { 
     background-color: lightblue; 
    } 

@media only screen and (orientation: landscape) { 
    body { 
     background-color: lightblue; 
    } 
} 

BAD

@media only screen and (orientation: landscape) { 
     body { 
      background-color: lightblue; 
     } 
    } 

    body { 
      background-color: lightblue; 
     } 

更新：

我想也提到兩種不同的方法。

移動首先

你的小屏幕樣式是在常規屏幕CSS，然後在屏幕變大你重寫你需要什麼。

body { background: lightblue; } 

@media (min-width: 480px) { 
    body { background: lightblue; } 
} 

桌面首先

你的大屏風格是在你的常規屏幕CSS，然後在屏幕變小，你重寫你需要什麼。

body { background: lightblue; } 

@media (max-width: 480px) { 
    body { background: lightblue; } 
} 

Answer 2

沒關係。出於實際的目的，我將媒體查詢放置在建模元素之後，但是您可以將所有查詢放在頁面的頂部或底部，並且它將無所謂（不會加載更快或更慢）。爲了調試的目的，我認爲這是更好的方法。

例如：

.box { max-width: auto; } 

@media (min-width: 1200px) { 
    .box { 
    max-width: 10px; 
    } 
}