What's an elegant way to conditionally add a class to an HTML element in a view?
I occasionally have to add a class to an html element based on a condition. The problem is I can't figure out a clean way of doing it. Here's an example of the stuff I've tried:
<div <%= if @status = 'success'; "class='ok'"; end %>>
some message here
</div>
OR
<% if @status == 'success' %>
<div class='success'>
<% else %>
<div>
<% end %>
some message here
</div>
I don't like the first approach because it's crowded looking and hard to read. I don't like the second approach because the nesting is screwed up. It'd be nice to put it in the model, (something like @status.css_class
), but that doesn't belong there. What do most people do?
I use the first way, but with a slightly more succinct syntax:
<div class="<%= 'ok' if @status == 'success' %>">
Though usually you should represent success with boolean true
or a numeric record ID, and failure with boolean false
or nil
. This way you can just test your variable:
<div class="<%= 'ok' if @success %>">
A second form using the ternary ?:
operator is useful if you want to choose between two classes:
<div class="<%= @success ? 'good' : 'bad' %>">
Finally, you can use Rail's record tag helpers such as div_for
, which will automagically set your ID and class based on the record you give it. Given a Person
with id 47:
# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>
Avoiding logic in the views
The problem with the standard approach is that it requires logic in the form of if
statements or ternaries in the view. If you have multiple conditional CSS classes mixed with default classes, then you need to put that logic into a string interpolation or ERB tag.
Here's an updated approach that avoids putting any logic into the views:
<div class="<%= class_string(ok: @success) %>">
some message here
</div>
class_string
method
The class_string
helper takes a hash with key/value pairs consisting of CSS class name strings and boolean values. The result of the method is a string of classes where the boolean value evaluated to true.
Sample Usage
class_names(foo: true, bar: false, baz: some_truthy_variable)
# => "foo baz"
Other Use Cases
This helper can be used within ERB
tags or with Rails helpers such as link_to
.
<div class="<%= class_string(ok: @success) %>">
some message here
</div>
<% div_for @person, class: class_string(ok: @success) do %>
<% end %>
<% link_to "Hello", root_path, class: class_string(ok: @success) do %>
<% end %>
Either/Or Classes
For use cases where a ternary would be necessary (e.g. @success ? 'good' : 'bad'
), pass an array where the first element is the class for true
and the other is for false
<div class="<%= [:good, :bad] => @success %>">
Inspired by React
This technique is inspired by an add-on called classNames
(formerly known as classSet
) from Facebook’s React
front-end framework.
Using in your Rails projects
As of now, the class_names
function does not exist in Rails, but this article shows you how to add or implement it into your projects.
class_names (Rails 6.1+)
Rails 6.1 introduces a class_names
view helper
to make it easier to conditionally apply class names
in views.
Before:
<div class="<%= item.for_sale? ? 'active' : '' %>">
After:
<div class="<%= class_names(active: item.for_sale?) %>">
More examples:
class_names("foo", "bar")
# => "foo bar"
class_names({ foo: true, bar: false })
# => "foo"
class_names(nil, false, 123, "", "foo", { bar: true })
# => "123 foo bar"
Sources:
- Link to the corresponding PR.
-
Link to the
class_names
docs.
You can also use the content_for helper, especially if the DOM is located in a layout and you want to set the css class depending on the partial loaded.
On the layout:
%div{class: content_for?(:css_class) ? yield(:css_class) : ''}
On the partial:
- content_for :css_class do
my_specific_class
That is it.