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

Я не думаю, что здесь есть реальная разница в производительности. Существует несколько причин не использовать атрибуты style в вашем DOM - каждый инструмент анализа SEO там поднимет предупреждающий флаг и отпугнет вас.

Я бы просто пошел за Principle Of Least Astonishment и обработал стиль, в котором он, естественно, принадлежит, в вашем CSS.

Только если есть много изображений этих изображений в зависимости от имени пути или если они введены пользователем, я бы выбрал первый вариант.

Но это только мое мнение.