DRY 与适当的关注点分离

Question

我有一种情况，根据 @page_name 变量呈现不同的背景图像。在我看来，我可以在 HTML:

中做这样的事情

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

这将是最干燥的，或者我实际上可以使用 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 属性 - 那里的每个 SEO 分析工具都会发出警告标志并阻止您。

我只想在这里选择 Principle Of Least Astonishment 并在您的 CSS.

中处理它自然所属的样式

仅当根据路径名称存在很多个图像时，或者如果它们是用户输入的，我会选择第一个选项。

但这只是我的意见。

DRY 与适当的关注点分离

DRY vs appropriate separation of concerns

css

ruby-on-rails-4

dry

separation-of-concerns