`class_names` is the bees knees

class_names might be my favourite view helper in a long time. It turns ugly, messy CSS into something that can ready just as nicely as your Ruby code. Well, nearly:

Before:

<%= tag.div class: "bg-gray-300 #{ "border-2" if post.draft? } #{ "border-red-500" if post.invalid? }" do %>
	…
<% end %>

After:

<%= tag.div class: [
	"bg-gray-300",
	"border-2": post.draft?,
   	"border-red-500": post.invalid?
   ] do %>
	…
<% end %>

Now I know what you’re thinking, “You said you liked class_names?” Yup. And the class attribute uses it internal so you don’t need to use it directly! Look how helpful Rails is.

What class_names is doing is always including the non-hash values, these act as baseline styles, and including the hash keys whenever the hash value is present.

What’s nice is that class_names is actually just an alias for token_list. This means you can also use this on other attributes. I like using it for Stimulus controllers for example:

<%= tag.div "stuff", data: {
	controller: token_list([
		"controller1 controller2",
		"admin-controller": Current.user.admin?
	])
} %>

Is there a single method that makes your day?