Question

WHen you are writing ERB control structures in HTML markup, is it better to indent things to make the ERB logic clearer, or to make the resulting HTML indentation correct?

E.g.

<ul>
  <li>Entries</li>
<% entries.each do |entry| %>
  <li><%= entry.title %></li>
<% end %>
</ul>

vs

<ul>
  <li>Entries</li>
  <% entries.each do |entry| %>
    <li><%= entry.title %></li>
  <% end %>
</ul>

Answer 1

It’s a taste-based preference, but I would go with indentation that makes the code easiest to read, since that’s where more of your brain cells are expended. For me, that’s the second option, since it is more obvious to me that there is a loop there, and that the loop is inside the list, not just some plain old unlooped <li> tags.

This is quadrupally (can one say that?) true when you think about all the stuff that can happen to the markup between your code and the response: have you ever tried to correctly guess the indentation of a rendered partial? It’s pretty much by definition impossible. What about if your markup is minified?

HTML indents only really matter if you spend a lot of time reading your HTML page, but in practice, I only look at the HTML of my pages in my browser’s developer tools, which automatically does some cleanup of the markup anyway.