СУХОЙ против надлежащего разделения проблем

У меня есть ситуация, когда на основе переменной @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" %>);
}

Что бы разделяло проблемы, но меньше СУХОГО.

Есть мысли, что лучше? Например, с точки зрения скорости и производительности?


person james    schedule 11.02.2015    source источник


Ответы (1)


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

Я бы просто воспользовался принципом наименьшего удивления здесь и обработал бы стиль, которому он, естественно, принадлежит в вашем CSS.

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

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

person dgilperez    schedule 11.02.2015