This is the archived edition of an earlier essay. The current, expanded version lives at The Most Common CSS Markup Errors.
CSS rarely throws an error. It just shrugs, skips the line it doesn't understand, and carries on — which is precisely why the same handful of mistakes survive in production for years. Here is the field guide I wish someone had handed me earlier: the errors that cost real hours, and how to stop making them.
The browser discards any declaration it can't parse and keeps the rest of the rule. So a single typo takes out one property while everything around it works, making the bug maddening to find.
margin: 10 is invalid; it must be 10px. The only lengths that may be unitless are 0 and genuinely unitless properties like line-height and z-index.color: #12 or rgb(0 0 0 0.5) without the slash for alpha will be dropped.display: inlineblock or overflow: scrol vanish without complaint./* Silently ignored */
.card { padding: 16; line-height: 1.5px; }
/* Correct */
.card { padding: 16px; line-height: 1.5; }Shorthands reset every longhand they cover, including the ones you omitted. Writing background: red quietly wipes any background-image set earlier. font: 16px/1.4 sans-serif resets font-weight and font-style to their defaults. Order matters too: margin: 0 auto is not the same as margin: auto 0.
A shorthand is not a convenience that fills in blanks. It is a command that overwrites everything in its scope.
Some selector mistakes are outright bugs. A stray space changes the meaning: .nav.active matches one element with both classes, while .nav .active matches a descendant. Chaining a class onto an element you don't have (ul.grid when the grid is a <ol>) matches nothing. And :hover on the wrong element targets the label, not the control.
The most expensive errors are self-inflicted specificity spirals. One !important forces the next author to write two, and soon the stylesheet is an arms race nobody can win.
#id .thing div span. Low, even specificity is easy to override on purpose and hard to override by accident.!important for utilities whose whole job is to win — a genuine .hidden, say — not for patching a battle you started.@layer) or low-specificity :where() wrappers when you need predictable ordering without escalating weight.0).!important; justify each one out loud.None of these are exotic. That is the point. CSS forgives so readily that the ordinary mistakes are the ones that linger. Learn to spot them on sight and you spend your debugging time on real problems — not on a missing px.