The commonly accepted practices are not that good
Isn’t it frustrating that there are no elegant ways to conditionally append CSS class names to the
:class option of a
link_to helper call?
The code to do the conditionals is ugly and clutters up the views, especially when there’s more than one.
Everyone suggests a slightly different syntax, but which one is best? They all look messy and require putting logic in the view layer.
For such a common task, why isn’t there a better solution?
React for inspiration
React front-end framework has an add-on called
classNames (formerly known as
classSet) which offers a solution to this problem.
Given a hash with key/value pairs consisting of CSS class name strings and boolean values,
classNames function returns a string of classes where the boolean value evaluated to
Wouldn’t it be nice to have a similar method in Rails?
Finally, a better solution for Rails
css-class-string gem provides just such a helper for our Rails views.
Here’s an example of a
link_to which requires multiple conditional classes to be appended:
Now here is the same example using the
class_string helper method:
Although the code is about the same length, removing the string interpolation makes it easier to read, and there is no more logic inside the view which is a better practice.
The same helper can be used in any Rails tag helper which expects a
:class option (e.g.
Don’t want to use the gem? Implement it yourself
css-class-string gem has some useful advanced features such as using bare arguments for default classes and arrays for “one-or-the-other” classes,
however if you don’t want to add another gem to your
Gemfile then you can create a very basic version of the helper yourself.
Or if you prefer one-liners:
I’ll be adding
css-class-string or a helper like above to all of my projects moving forward.