Stop Scattering Your Front-End Across the Codebase

There’s a pattern I still see in codebases that should know better: styles in one directory, templates in another, and the logic connecting them living entirely in someone’s head.

stylesheets/
├── buttons.css
├── cards.css
├── forms.css
└── ...

templates/
├── checkout.html
├── dashboard.html
└── ...

You want to understand how a button works? Open buttons.css, memorize the variant names, find the template that uses it, cross-reference which classes apply where. Hope nothing changed since the last time you looked.

This made sense when CSS was global by nature and templates were dumb. But every major front-end framework now supports components and we should be using them.

Everything in one place

Here’s a button component from a Laravel app:

@php
$element = $attributes->get('element', 'a');
if ($element === 'a' && !$attributes->has('href')) {
    $element = 'button';
}

$defaultClasses = 'inline-flex border active:bg-black active:text-white';

$variants = [
    'primary' => 'text-white bg-black hover:bg-white hover:text-black border-black',
    'outline' => 'text-black bg-transparent hover:bg-black hover:text-white border-black',
    'inverse' => 'text-black bg-white hover:bg-black hover:text-white border-white',
];

$sizes = [
    'xs' => 'px-4 py-2 text-xs',
    'sm' => 'px-4 py-2 text-sm',
    'base' => 'px-6 py-3 text-base',
    'lg' => 'px-8 py-4 text-lg',
];
@endphp

<{{ $element }}
    class="{{ $defaultClasses }} {{ $variants[$attributes->get('variant', 'primary')] }} {{ $sizes[$attributes->get('size', 'base')] }}"
    {{ $attributes->except(['class', 'variant', 'size', 'element']) }}
>
    {{ $slot }}
</{{ $element }}>

All in one file: styles, markup, logic, variant, sizes.

A new developer can open this and understand the entire button system in seconds.

Why this matters

Onboarding gets faster. New team members don’t need a tour of your stylesheet architecture. They open the component, they see how it works.

Changes are safer. When styles, markup, and logic live together, you can see the full impact of a change before you make it.

Variants become explicit. Instead of hoping developers remember that .btn--secondary exists, you define variants as an object. The API is clear.

AI tooling actually works. When you ask an LLM to modify a component it needs context. A self-contained component hands over everything in one shot.

The shift

The old model: global stylesheets as the source of truth, templates as dumb consumers.

The new model: components as self-contained units, stylesheets (if they exist at all) for true global concerns like resets and CSS custom properties.

If your framework supports components, use them. Put your styles where your markup is. Make your UI self-documenting.

Your future self will thank you. So will the next person who touches your code.