HTML Style Guide

This style guide applies to all HTML. This also includes Blade templates and components, Vue components and Alpine.js components.

Formatting

When an HTML element has multiple attributes, each successive attribute must be written on a new line. All must be placed in alphabetic order.

<x-dynamic-component @class([
                         'p-4',
                         'bg-red' => $hasError,
                     ])
                     :component="$component"
                     @if($condition) disabled @endif
                     id="unique-id"
                     x-data="{}"
                     v-bind:class="{ isActive: shouldBeActive }"/>

If an element has both attribute(s) and text, the text should be written on a new line.

<td class="px-6 py-3">
    Lorem ipsum
</td>

<span>{{ $foo->bar }}</span>

If an element has one or more child elements and/or text, the inner HTML must always be written on a new line.

<button>
    <i class='fak fa-hihaho-check-icon'></i>

    Save
</button>