The filter that silently did nothing

A tag filter on the site looked completely finished and did absolutely nothing. Click a category, the JavaScript ran without error, and every card stayed exactly where it was. No exception, no console warning — just a feature that was fully wired up and completely inert.

The cause was a one-line collision between the JavaScript and the CSS. The filter hid cards by setting the HTML hidden attribute, which works because the browser's default stylesheet says [hidden] { display: none }. But the cards carried their own rule — display: flex — set directly on the card class. Author CSS beats the browser default, so display: flex won, hidden was overruled, and the cards refused to disappear.

The fix is one rule: [hidden] { display: none !important; }, so the attribute always wins.

The lesson is broader than the bug. Any time you toggle the hidden attribute on an element that also has an explicit display value, your own stylesheet quietly defeats you — and it's a silent failure, the worst kind, because everything looks correct and simply has no effect. When a DOM-manipulation feature does nothing at all, suspect specificity before you suspect your logic.