ruby-on-rails - 样式化 ERB 的最佳实践

Question

我想听取一些关于 ERB 模板样式最佳实践的社区意见。

• 我使用的 Tab 宽度为 2。
• 我使用软制表符(空格)。
• 我使用 80 字换行。

除了 ERB 模板中的 Ruby 代码外，我还缩进了所有 HTML 标签。

这通常会使 ERB 非常可读。

假设上述或类似参数，您更喜欢如何缩进较长的行？

考虑这个例子:

<div class="content">
  <div class="row">
    <div class="span10">
      <%= simple_form_for(@user, html: { class: 'form-horizontal' }) do |f| %>
        <%= f.input :MembershipID, label: 'Membership ID :', hint: 'Use the user\'s official Membership ID if they have one. Otherwise, enter their phone number (e.g. 2125551234)', input_html: { value: @user[:MembershipID] } %>
      <% end %>
    </div>
  </div>
</div>

f.input 行变得非常丑陋且不可读。

我认为这样的东西会很理想，但我想在改变我的风格之前获得一些反馈。

<div class="content">
  <div class="row">
    <div class="span10">
      <%= simple_form_for(@user, html: { class: 'form-horizontal' }) do |f| %>
        <%= f.input :MembershipID, 
                label: 'Membership ID :', 
                hint: 'Use the user\'s official Membership ID if they have one. Otherwise, enter their phone number (e.g. 2125551234)', 
                input_html: { value: @user[:MembershipID] } %>
      <% end %>
    </div>
  </div>
</div>

我反复思考从 ERB 开始标记 <%= 还是从助手名称 f.input 双缩进更好。

请称重! (并且请不要将其变成 ERB 与 HAML 的辩论，假设只有 ERB!)

谢谢。

Answer 1

一些需要考虑的事情:

• 不要使用“span10”和“row”类，而是将其应用到您的 CSS 中
• 使用助手，即使您不打算重用它们(目前)，它也会清理您的代码

这给你类似的东西:

<div class="content">
  <%= simple_form_for(@user) do |f| %>
    <%= membership_input_field %>
  <% end %>
</div>

SCSS:

.content {
  @extend .row;
  #users_form {
    @extend .span10;
    @extend .form-horizontal;
  }
}

我现在无法对此进行测试，但您应该了解总体思路。用于设置 HTML 样式的类更加简洁，无用的类也少得多。