ERB 样式最佳实践

Question

我希望获得一些关于设计 ERB 模板最佳实践的社区意见。

• 我使用的制表符宽度为 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>

社会保障体系：

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

我现在无法对此进行测试，但您应该了解总体思路。更干净、更少无用的类来设计 HTML。