DEV Community

Rails Designer
Rails Designer

Posted on • Originally published at railsdesigner.com

Conditionally Add CSS Classes to Your Views and Components

#rails #quicktip

This article was originally published at Rails Designer

With the release of Rails 6.1, the class_names view helpers was introduced. It is one of those helpers I use a lot.

Before you had to write some hard to read code:

<div class="<⁠%= item.for_sale? ? 'active' : '' %>">
Enter fullscreen mode Exit fullscreen mode

But with the class_names helper, you can do:

<div class="<⁠%= class_names(active: item.for_sale?) %>">
Enter fullscreen mode Exit fullscreen mode

Both output the following HTML (assuming item.for_sale? returns true):

<div class="active">
Enter fullscreen mode Exit fullscreen mode

More advanced is the following:

class_names("item", { active: item.for_sale?, "out-of-stock": item.out_of_stock? })
Enter fullscreen mode Exit fullscreen mode

Here item is applied in all cases. And active / out-of-stock only when the respective conditionals are met.

The class_names helper is also supported in tag-helpers. So this works just the same:

<⁠%= tag.div class: class_names(active: item.for_sale?) %>
Enter fullscreen mode Exit fullscreen mode

Or even shorter, like this:

<⁠%= tag.div class: [active: item.for_sale?] %>
Enter fullscreen mode Exit fullscreen mode

It's one of those little, unknown features in Rails that helps you write better views and components. No wonder it is used in almost all Rails Designer's components.

Top comments (0)

Read next

jetthoughts-dev profile image

Rails 8: Introducing the New Default Asset Pipeline – Propshaft

JetThoughts Dev -

bestwebventures profile image

ActiveAdmin v4 Beta: New Features, Upgrades, and How to Migrate

BestWeb Ventures -

alexandrecalaca profile image

BCrypt::Errors::InvalidHash (invalid hash)

Alexandre Calaça -

aliosm profile image

Enforcing Phlex Adoption in Rails: A GitHub Action to Prevent New ERB Files

Ali Hamdi Ali Fadel -