The Case Against Over-Abstracting Front-End Code

Sometimes duplication is clearer—and faster.

Abstraction is useful when it removes repeated complexity, not when it hides three clear lines behind an impressive vocabulary. Front-end code often benefits from a little duplication if the alternative requires a diagram and the original author to explain it.

The useful question behind “The Case Against Over-Abstracting Front-End Code” is what changes in the work afterwards. A sound idea should improve a real decision, not only give us a neat phrase for describing it.

This matters because small choices repeat. What feels harmless once can quietly become the normal way of working.

Prefer the thing that survives contact

Front-end work has a habit of looking simple from a distance. The browser then introduces real content, small screens, old devices, keyboard navigation and somebody using the product in a way nobody drew in the design file.

That is why I favour choices that are easy to inspect. Start with semantic HTML, let CSS do the layout work it was designed for, and add JavaScript where it creates genuine value. Cleverness is occasionally useful; legibility is useful every day.

The best front-end code does not show off. It makes the interface feel obvious.

A practical way to start

A few questions help me decide what to do next:

• Does this help the user or mostly impress the team?
• Will the choice still make sense under pressure?
• Can we describe the reason without hiding behind jargon?

None of those questions produces an automatic answer. They do make the trade-offs visible, which is usually the point where a team can stop arguing from instinct and start making a decision together.

The web is wonderfully forgiving, but users should not have to rely on that forgiveness. Build from sturdy foundations and the interesting parts become much easier to enjoy.

I do not always manage it perfectly. The aim is to make the better choice easier to recognise the next time it appears.