使用modernizr時，混合技術，即針對特定功能還是針對特定功能，這是否是一種糟糕的實踐？

Question

我正在嘗試使用modernizr。可以在同一個樣式表中混用「for/against各種功能」，如果有的話，是否有任何通用規則來說明如何混合它們？

例如這是好還是壞的做法。我只是想知道，混合慣例是否會造成混淆，以及如果一般堅持一種慣例會更好，只有在必要時才使用例外;或者以避免所有例外的方式進行編程是非常重要的。

.no-borderradius .some-element { 
    ... 
    } 

    .boxshadow .some-other-element {   
    ... 
    } 

Answer 1

這真的取決於情況，即如果你有風格依賴。

例如，如果應用border-radius，則需要在#box上填充一些填充，如果瀏覽器不支持，則不需要填充。在這種情況下，你可以這樣做：

.border-radius #box { 
    border-radius: 5px; 
    padding: 5px; 
} 

（忽略缺少供應商前綴）

但如果，例如，有微妙的漸變剛剛提高了外觀並沒有什麼取決於它，你可以這樣做：

#box { 
    background: white linear-gradient(...); 
} 

支持它的瀏覽器會顯示它，瀏覽器誰不會只顯示退化的白色外觀。

另一個示例，您需要不同的邊框顏色，具體取決於box-shadow是否已成功應用。你可以設置一個盒子無影的風格，並覆蓋它，如果的box-shadow支持：

#box { 
    border-color: gray; 
} 
.box-shadow #box { 
    box-shadow: black 0 0 5px; 
    border-color: white; 
} 

你可以做到這一點的其他方式，但在我看來，它更有意義先給退化的風格，然後加強它。你會發現在這個例子中，不需要使用.no-box-shadow，因爲我無論如何都在重寫邊框顏色。另外，如果您發現灰色邊框在視覺上可以接受的方塊陰影，則可以將方塊陰影樣式放在#box（而不是.box-shadow #box）之下。總結一下，沒有必要將類的代碼混淆爲「一致」，你只需要考慮樣式的語義。另外，如果你的樣式過多地依賴於JavaScript生成的類，想象你的頁面在JavaScript關閉的情況下會變成什麼樣子。