The bug that never errors

Four times in one week, the same defect. Every time it looked new. Every time the cause was one line of CSS that could not possibly match.

Our layout grid holds cards. Cards are .tile. The profile block is also a grid item — but it is .profile-tile, because it is an identity, not a card.

Every rule written as .tile silently skipped it.

What that cost, in order

Resize handles never appeared. .tile:hover .resize — the profile has handles in the markup, and no rule ever showed them.

Row height never applied. .tile[data-h="2"] — a profile set to two rows got a grid area of 296px and stayed 87px tall. The user drags the corner; the number changes; nothing moves.

A dead margin ate 48px. align-self: stretch fills the grid area minus margins, and a leftover margin-bottom from when the profile lived outside the grid took exactly 48px off every height. 140 became 92. 296 became 248.

Dragging drifted. .grid .tile.lifted sets position: fixed during a drag. It never matched, so the card stayed in grid flow while a transform moved it — and it slid away from the point you grabbed.

Why it kept happening

None of these threw. Nothing appeared in a console. There was no failing request, no red text, no stack trace. The feature was simply absent, and absence is invisible in every tool we had.

We only found each one by measuring the wrong number — comparing what the box should be against what getBoundingClientRect said it was.

The actual fix

Not "remember to add .profile-tile too." That is a note, and notes expire.

The selectors now key on role, not class name:

.grid > [data-w] every card in the grid .grid > [data-h="2"] every grid child two rows tall [data-drag].lifted anything currently being dragged

Being a child of the grid is the qualifying fact. A new element that participates in layout is covered the day it is added, by nobody remembering anything.

If a rule is about a behaviour, key it on the behaviour. A class name is a name; it will drift from the thing it names.