Use the Class Blade Directive to apply classes in Laravel for better readability

Class Blade Directive: Hello Laravel developers! We’ve all experienced the frustration of carefully putting together class names in Blade templates using double curly braces. It can be quite challenging to keep things organized and manageable, particularly when dealing with complicated conditional logic.

No need to worry! Laravel provides a valuable tool for simplifying class use of your Blade templates: the @class directive! In this post, we’ll delve into the art of efficient class management and bid farewell to the tedious process of string concatenation. Let’s discover the wonders of @class for a more organized and sustainable approach.

Please read Saving a Model and its relations at once in Laravel 11 is a breeze to save a model and its relations.

Why Use the class Blade directive?

String concatenating class names in Blade templates can quickly become cumbersome. Imagine a scenario where you have a form input that needs to be:

• Padded with a p-4 class for spacing.
• Marked with a red border (border-red-500) if there’s a validation error.
• Hidden (hide) based on a specific condition.

Traditionally, you might approach this like this:

<input 
  type="text" 
  name="first_name" 
  class="{{ 'p-4' }}
        {{ $hasError ? 'border-red-500' : '' }}
        {{ $shouldShow ? ' hide ' : '' }}
  " />

See the issue? Nested conditionals and a lot of extra quotation marks. This can get difficult to read and manage, especially as your conditionals grow more complex.

Unleashing the Power of @class

The @class directive offers a cleaner and more efficient way to achieve the same result. Here’s how it works:

<input 
  type="text" 
  name="first_name" 
  @class([
    'p-4',
    'border-red-500' => $hasError,
    'hide' => $shouldShow
  ])
/>

Much better, right? @class takes an array of class names (or expressions that evaluate to class names). This makes your code cleaner and easier to reason about. Here’s a breakdown of the magic:

• The array contains each class name you want to apply.
• For conditional classes, you can use an arrow function (=>) to specify the condition. If the condition evaluates to true, the class name is included in the final output.

Conclusion

By embracing the @class Blade directive, you can significantly improve the readability and maintainability of your Laravel Blade templates. It promotes cleaner code, reduces the chance of errors, and makes managing class names a breeze.