CSS 并不難——除非你真的開始寫了。

如果你曾花 45 分鐘調一個 margin，最后才發現問題出在 padding 上，你并不孤單。CSS 看起來簡單，其實暗藏玄機。即使經驗豐富的前端工程師，也常常會在 QA 報告、移動端視圖或某些奇怪的瀏覽器邊緣情況中，被這些隱藏的坑絆住。

以下是即使老司機也常犯的 10 個 CSS 錯誤：

1. 不理解堆疊上下文就亂用 z-index

加個 z-index: 9999 就能解決問題，對吧？

并不總是。很多元素因為 transform、opacity < 1、filter、will-change 或 position: fixed 而創建了新的堆疊上下文（stacking context），這會讓你的 z-index 在“孤島”里失效。

這類 bug 在模態框、下拉菜單中尤其常見，令人頭疼。

2. 移動端誤用 vh 單位

過去寫 height: 100vh 是做全屏布局的常規操作，但在移動端，這會出問題。

例如 iOS Safari 會根據不同情況計算瀏覽器 UI 的高度，導致頁面被截斷或超出屏幕。

更好的做法：用 100dvh（動態視口高度）或使用 JavaScript 動態計算高度。

3. 忘了 flex 子元素默認不會收縮

布局突然炸裂，一塊卡片撐得很大，問題可能在于 flex-shrink 沒有生效。

特別是當子元素內容不換行，或者圖片沒有 max-width 時，容器會被“撐爆”。

解決方案：試試給元素加上 min-width: 0 或 overflow: hidden。

4. 在 flex 容器里用 position: absolute 卻忘了加 relative

這是個隱蔽陷阱：在 flex 容器中使用絕對定位的元素，卻沒有給父元素設置 position: relative。

這時 top/right/bottom/left 不會按你的預期生效，只能靠運氣。

5. 不必要的選擇器嵌套

你是否也寫過這樣的 CSS？

.card .card-content .card-title {
  /* why tho? */
}

不如直接寫 .card-title。

嵌套過深讓樣式更難維護、復用和覆蓋。使用 BEM、CSS Modules 時，更應保持選擇器扁平化。

6. 濫用 !important

!important 是救命稻草，但不是日常武器。

一旦你開始用它，就會陷入“誰更重要”的戰斗。最終，每條樣式都不得不用 !important 才能生效。

正確用法：僅在你無法控制源樣式（如第三方庫）時才使用。

7. 忘記 box-sizing: border-box

你還在寫：

width: 100%;
padding: 20px;

然后驚訝為什么布局會超出容器？

別忘了：

* {
  box-sizing: border-box;
}

它能確保 padding 包含在 width 內部，而不是附加其上。能救你無數次。

8. 忽略邏輯屬性（Logical Properties）

還在用 margin-left、padding-top？

它們在 RTL（從右到左）語言或豎排布局中會出問題。

使用邏輯屬性更智能：

padding-inline-start: 1rem;
margin-block-end: 2rem;

讓你的布局更具適應性。

9. 濫用 display: flex，其實只需要 block

你可能習慣寫：

display: flex;
align-items: center;
justify-content: center;

但其實：

display: block;
margin: auto;

就能搞定居中。別忘了傳統技巧也有用武之地。

10. 不給 CSS 架構

CSS 沒有報錯提示，但它會悄悄毀掉你的 UI。

沒有結構規范（如 BEM、SMACSS、Tailwind、CSS Modules），你的樣式遲早變成意大利面。

CSS 是全局作用的語言，這既是它的優勢，也是它的陷阱。

總結

就算是資深開發者，也難免犯這些錯。重點不是永遠避免失誤，而是認清這些坑，下次能更快排查、解決。

那么，你中了幾條？或者還有其他令人抓狂的 CSS 錯誤？