---
title: Common Markup and Style Mistakes In Rails
teaser:
tags: design,web,rails
author: Dan Croak
published_on: 2009-04-09
---

Here are three common mistakes we've made in the past. Nothing earth-shattering
but they've now become rules of thumb to avoid when developing markup & style
for our Rails apps.

* Paragraph tags around form fields
* Forgetting blank option in selects
* Styling elements globally

## Paragraph tags around form fields

You're marking up a form. Don't do this:

```erb
<%= form.label :title %>
<%= form.text_field :title %>
```

Why? If the attribute is required, when validation fails, the markup will look
like this:

```html
<div class="fieldWithErrors">
  <label for="deal_title">Title</label>
</div>
<div class="fieldWithErrors">
  <input id="deal_title" name="deal[title]" size="30" type="text" value="" />
</div>
```

Do you see the problem? There are divs inside the paragraph tags, which is
invalid markup.

Invalid markup is A Bad Thing for general correctness, but it also has at least
one practical implication: depending on your styles, you may not give the user
nice visual feedback you could otherwise provide around a form field:

![''](http://images.thoughtbot.com/ui/2009-4-9-Picture_1.png)

Do this instead:

```erb
<div>
  <%= form.label :title %>
  <%= form.text_field :title %>
</div>
```

We follow our own advice in the generated [users/\_form][users-form] and
[sessions/new][sessions-new] in [Clearance].

[users-form]: http://github.com/thoughtbot/clearance/blob/fa424b8fe9fd8f151f32a726982a3fd42940b328/generators/clearance/templates/app/views/users/_form.html.erb
[sessions-new]: http://github.com/thoughtbot/clearance/blob/fa424b8fe9fd8f151f32a726982a3fd42940b328/generators/clearance/templates/app/views/sessions/new.html.erb
[Clearance]: https://thoughtbot.com/blog/clearance-rails-authentication-with-email-and-password

## Forgetting blank option in selects

Any dropdown without a default value should include a blank option as the
default.

Don't do this:

```erb
<div>
  <%= form.label :location %>
  <%= form.select :location, Location::ALL %>
</div>
```

Instead do this:

```erb
<div>
  <%= form.label :location %>
  <%= form.select :location, Location::ALL, :include_blank => true %>
</div>
```

Why?

### Required attribute

If the option is required, prefer that the user gets a validation message
saying they need a location instead of accidentally assigning location to
Boston when it should be New York.

### Optional attribute

A blank default has no downside for an optional attribute.

## Styling elements globally

It can be tempting to apply specific styles directly to elements to achieve
results quickly. The risk of style collisions increases as soon as style is
applied directly to an element.

If a style should only apply to one or a handful of elements, that style should
be within an appropriate selector.

Don't do this:

```css
input {
  float: left;
  clear: both;
}
```

Instead do this:

```css
form#new_user #first_name.text_field input {
  float: left;
  clear: both;
}
```

This becomes a particularly troublesome issue with styles that affect the [box
model](http://www.w3.org/TR/CSS2/box.html) (margin, padding, border) and
[layout](http://www.alistapart.com/stories/practicalcss/) (floating, display,
position).

Writing style to remain specific to page elements will save you from having to
troubleshoot many strange layout bugs, and also saves you from having to reset
these styles for any subsequent elements.