I'm facing a scenario where a unique background image needs to be displayed depending on the value of the @page_name variable. It occurs to me that I have two options for implementing this in my HTML:
<div class="jumbotron" style="background-image: url(<%= asset_path "Jumbotron/#{@page_name}.gif" %>)">
The above method would adhere to the DRY principle, or I could alternatively utilize the CSS file like so:
<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" %>);
}
While the second approach separates concerns, it is not as adherent to the DRY principle.
Any insights on which method might be more optimal? Specifically in terms of speed and performance?