Note that there are some explanatory texts on larger screens.

plurals
  1. POBest Practices for Styling ERB
    text
    copied!<p>I'd like to get some community input on best practices for styling your ERB templates.</p> <ul> <li>I use a Tab Width of 2.</li> <li>I use soft tabs (spaces).</li> <li>I use a Word Wrap of 80.</li> </ul> <p>I indent all my HTML tags in addition to Ruby code inside my ERB templates.</p> <p>This usually makes for very readable ERB.</p> <p>Assuming the above or similar parameters, how do you prefer indent longer lines? </p> <p>Consider this example:</p> <pre><code>&lt;div class="content"&gt; &lt;div class="row"&gt; &lt;div class="span10"&gt; &lt;%= simple_form_for(@user, html: { class: 'form-horizontal' }) do |f| %&gt; &lt;%= 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] } %&gt; &lt;% end %&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The <strong>f.input</strong> line gets to be pretty ugly and unreadable.</p> <p>I was thinking something like this would be ideal, but I wanted to get some feedback before changing a lot of my style.</p> <pre><code>&lt;div class="content"&gt; &lt;div class="row"&gt; &lt;div class="span10"&gt; &lt;%= simple_form_for(@user, html: { class: 'form-horizontal' }) do |f| %&gt; &lt;%= 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] } %&gt; &lt;% end %&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I'm back and forth on whether double indenting from the ERB begin tag <strong>&lt;%=</strong> or from the helper name <strong>f.input</strong> is better.</p> <p>Please weigh in! (and please let's not turn this into a ERB vs HAML debate, assume ERB only!)</p> <p>Thanks.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload