Common CSS Design Mistakes and Their Implications

The CSS Working Group’s official wiki lists 46 design mistakes made over the years; this article selects a few particularly interesting ones and discusses why they are considered poor design.

!important Syntax

The !important rule is meant to increase a declaration’s weight, but the exclamation mark in programming usually means logical negation, leading many newcomers to misinterpret it as “not important”. The working group therefore regards !important as a bad syntax.

const isValid = true;
!isValid // false

z-index Syntax

The z-index property controls the stacking order of positioned elements (and flex items) along the Z‑axis; larger values appear on top. Because the term “index” in programming refers to a position in a list rather than stacking, the group suggests using terms like z-order or depth and applying the property to all elements, not just positioned ones.

Margin Collapse

“Margin collapse” is a fundamental CSS behavior where adjacent vertical margins combine, taking the larger of the two values instead of summing them. This can cause unexpected layout issues, such as a bottom margin that appears to have no effect because it collapses with the following element’s top margin.

Even a single block‑level element can experience margin collapse when it has no content or its content is cleared, causing its top and bottom margins to merge into one value (the larger one).

rgb vs. rgba

Both rgba and hsla allow an alpha (transparency) channel, whereas rgb and hsl do not. The working group questions why the older functions were not extended to accept a fourth alpha parameter.

border-radius Naming

The property border-radius literally translates to “border radius”, but a more accurate name would be corner-radius because it defines the radius of an element’s corners.

Absolute‑Positioned Replaced Elements

Replaced elements (e.g., img , object , video , iframe ) have their appearance and size determined by external resources. When such an element is absolutely positioned, offset properties should affect its size rather than its position; for example, left:20px; right:20px; should stretch the image to fill the space between the two offsets.

Summary

The article only highlights a subset of the 46 mistakes; many others are subjective design habits. Additional suggestions include using the » combinator for descendant selectors and ++ for sibling selectors.

// current descendant selector
div p {
  color: green;
}
// desired descendant selector
div » p {
  color: green;
}

// current sibling selector
div ~ p {
  color: green;
}
// desired sibling selector
div ++ p {
  color: green;
}