This content originally appeared on Go Make Things and was authored by Go Make Things
Something I’ve seeing more and more of with my clients is code that’s repeated in multiple places, but written in a way that it has to be manually duplicated every time.
It’s particularly prevalent in JS-heavy apps. Let’s dig in!
HTML Components
Sometimes, it’s two UI components that do the same thing, but with minor differences.
For example, imagine A/B testing two different landing pages, with different heading text, but everything else is the same. Here’s a React example that’s pretty typical of what I see in the wild.
function HeroOne () {
return (
<div className="hero">
{/* Imagine some autoplay video nonsense here... */}
<h1>Buy Awesomeco™ brand toilet paper.</h1>
<p>So soft, even dystopian oligarchs like Jeff Bezos use it!</p>
<a className="btn" href="/buy">Buy Now</a>
</div>
);
}
function HeroTwo () {
return (
<div className="hero">
{/* Imagine some autoplay video nonsense here... */}
<h1>Wipe away shit like Jeff Bezos.</h1>
<p>Yep, that's exactly what we meant.</p>
<a className="btn" href="/buy">Buy Now</a>
</div>
);
}The scaffolding around this is all the same. Same classes. Same HTML structure. Same UI.
The only thing that’s different is the text.
Reusable HTML components
This could be rewritten with parameters for the different heading and call-to-action (CTA) text, like this…
function Hero ({
heading = 'Buy Awesomeco™ brand toilet paper.',
cta = 'So soft, even dystopian oligarchs like Jeff Bezos use it!',
}) {
return (
<div className="hero">
{/* Imagine some autoplay video nonsense here... */}
<h1>{ heading }</h1>
<p>{ cta }</p>
<a className="btn" href="/buy">Buy Now</a>
</div>
);
}Then, it can be used with the default text like this…
function Home () {
return <Hero />;
}
Or customized like this…
function TestNew () {
return (
<Hero
heading="Wipe away shit like Jeff Bezos."
cta="Yep, that's exactly what we meant."
/>
);
}
This let’s you use that same component in a bunch of places with slight tweaks and variations, without ever having to create a new component.
CSS, minus the C
An even more common issue I see is grossly over-repeated CSS.
I think this is largely a byproduct of developers who don’t know CSS being forced to write it, coupled with a whole gaggle of internet-famous developers (mostly from Utah) telling our industry over-and-over again that CSS is “broken” or “bad” and needs fixing.
Imagine something that looks like an alert or callout.
I’ll often see something like this….
function SomePage () {
return (
<div>
<h1>Dystopia, the musical!</h1>
<div style={{
backgroundColor: "#f7f7f7",
border: "1px solid #808080",
borderRadius: "0.5em",
marginBlockEnd: "1em",
padding: "1em",
}}>
Tickets are on sale now!
</div>
<p>More text and stuff...</p>
<div style={{
backgroundColor: "#f7f7f7",
border: "1px solid #808080",
borderRadius: "0.5em",
marginBlockEnd: "1em",
padding: "1em",
}}>
Last chance to save!
</div>
</div>
);
}This approach is usually paired with a global stylesheet that uses a super old-school nuclear “remove all the styles form everything” approach…
* {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
*:active,
*:focus,
*:hover {
border: 0;
outline: 0;
}This is allegedly “better” because those styles are “scoped” to just the element and won’t be “tainted” by that evil global CSS and it’s devilish cascade.
And then, as your “reward,” you get to write way more CSS over-and-over again, constantly repeating yourself and violating DRY principles because you’re a real 10x developer or whatever.
Sometimes, folks use Tailwind instead of inline styles, which is literally the same thing even worse…
<div
className="
bg-gray-950
border border-solid border-gray-800
rounded-lg
p-1
mb-1
"
}}>
Last chance to save!
</div>Reusable CSS
CSS classes solved this problem so long ago.
.callout {
background-color: #f7f7f7;
border: 1px solid #808080;
border-radius: 0.5em;
margin-block-end: 1em;
padding: 1em;
}function SomePage () {
return (
<div>
<h1>Dystopia, the musical!</h1>
<div className="callout">
Tickets are on sale now!
</div>
<p>More text and stuff...</p>
<div className="callout">
Last chance to save!
</div>
</div>
);
}So much easier to read. So much easier to write. Consistent, reusable styling across your app.
You can make things even easier with CSS variables, so that you can change colors later without have to rewrite the values everywhere.
Use experts
I know a little backend code.
If I need to, I can copy/paste/replace an API endpoint to create a new one that does something similar, or write data to a database, or return some HTML.
But a proper backend engineer will create something that’s faster, more resilient, more secure, and more fault tolerant. They’re an expert. I’m a novice.
So is true for the frontend.
Far too many full-stack developers are backend-biased, but given free-reign of frontend code. The result is almost always something that’s riddled with accessibility issues and repeated code, a UI that’s slower and buggier, and and overall worse user experience.
All of this vibe-coding AI generated bullshit is only making it worse, as AI trained on terribly written code gets pushed back out into the world, reconsumes itself, and repeats, like an awful code-version of the human centipede.
If you project suffers from these problems, or if you have AI generated code you need fixed, get in touch. I’d love to help!
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-10-08T14:30:00+00:00) Creating reusable code. Retrieved from https://www.scien.cx/2025/10/08/creating-reusable-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.