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中处理它自然属于的样式。

只有根据路径名称有很多这些图像，或者如果它们是用户输入，我会去第一个选项。

但这只是我的看法。