DRY vs適當分離問題

Question

我有一種情況，根據變量@page_name呈現不同的背景圖像。在我看來，像我既可以做這樣的事情在HTML：

<div class="jumbotron" style="background-image: url(<%= asset_path "Jumbotron/#{@page_name}.gif" %>)"> 

這將是DRYest，我也可以實際使用的CSS文件，做這樣的事情：

<div class="jumbotron <%= @page_name %>"> 

.jumbotron.home { 
    background-image: url(<%= asset_path "Jumbotron/home.gif" %>); 
} 

.jumbotron.outdoors { 
    background-image: url(<%= asset_path "Jumbotron/outdoors.gif" %>); 
} 

.jumbotron.snowsports { 
    background-image: url(<%= asset_path "Jumbotron/snowsports.gif" %>); 
} 

這將分離的關注，但較少幹。

對什麼更優化有什麼想法？例如，從速度&性能角度？

Answer 1

我不認爲這裏有真正的性能差異。在您的DOM中使用style屬性有幾個原因 - 每個搜索引擎優化分析工具都會引發一個警告標誌並阻止您。

我只想在這裏找到Principle Of Least Astonishment，並在CSS中處理它自然屬於的樣式。

只有根據路徑名稱有很多這些圖像，或者如果它們是用戶輸入，我會去第一個選項。

但這只是我的看法。