為什么有些事情用CSS就夠了，不必非用JavaScript？

作者：前端小智 2025-07-22 00:00:00

開發前端

JavaScript確實強大，這是毋庸置疑的。但你知道嗎？其實不一定每次都需要它。事實上，JavaScript越少，網站性能往往越好。

JavaScript確實強大，這是毋庸置疑的。

但你知道嗎？其實不一定每次都需要它。

事實上，JavaScript越少，網站性能往往越好。

為什么要減少JavaScript的使用？

想象你背著一個沉重的背包跑馬拉松，這就是你網站加載多余JavaScript的感覺。

每一行JavaScript都會增加“負擔”：

減少JavaScript，性能更佳。
CSS解析執行更快。
JavaScript會觸發重渲染，CSS則不會。
JavaScript錯誤可能導致頁面崩潰，CSS出錯影響很小。

當然，我不是說完全不使用JavaScript。

只是當CSS能優雅完成某件事時，何必讓事情復雜化呢？

1. 懸停顯示子菜單

下拉菜單你見過不少。

大多數開發者習慣用JavaScript來控制顯示隱藏，但其實CSS的:hover就能搞定。

HTML結構示例：

<nav>
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">關于</a></li>
    <li>
      <button>博客 ↓</button>
      <ul>
        <li><a href="#">新聞</a></li>
        <li><a href="#">訪談</a></li>
        <li><a href="#">旅游</a></li>
        <li><a href="#">藝術</a></li>
        <li><a href="#">科技</a></li>
      </ul>
    </li>
    <li><a href="#">聯系</a></li>
  </ul>
</nav>

CSS樣式：

nav > ul > li {
  position: relative;
}
nav > ul ul {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
nav > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

無需JavaScript，菜單平滑顯示。

2. 純CSS標簽頁切換

需要做標簽頁切換？

很多人第一反應是用JavaScript監聽點擊，然后顯示隱藏內容。

但CSS的:checked偽類配合兄弟選擇器~就能輕松實現切換。

HTML結構示例：

<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">標簽1</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">標簽2</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">標簽3</label>

<div class="tab-content" id="content1">標簽1內容</div>
<div class="tab-content" id="content2">標簽2內容</div>
<div class="tab-content" id="content3">標簽3內容</div>

CSS樣式：

input[type="radio"] {
  display: none;
}
label {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  background: #eee;
  border: 1px solid #ccc;
}
input[type="radio"]:checked + label {
  background: white;
  font-weight: bold;
}
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

就這么簡單，純CSS實現功能完整的標簽頁。

3. 滾動捕捉（Scroll Snap）實現流暢導航

你在電腦上瀏覽YouTube Shorts或Instagram故事時，那種滑動到位的順暢體驗，其實是CSS搞定的！

利用scroll-snap-type和scroll-snap-align輕松實現。

HTML結構示例：

<div class="scroll-container">
  <div class="scroll-item">內容1</div>
  <div class="scroll-item">內容2</div>
  <div class="scroll-item">內容3</div>
</div>

CSS樣式：

.scroll-container {
  overflow-y: scroll;
  height: 300px;
  scroll-snap-type: y mandatory;
}
.scroll-item {
  scroll-snap-align: start;
  height: 100px;
  background: lightblue;
  margin: 10px 0;
}

兩條CSS屬性，實現絲滑滾動捕捉。

什么時候還得用JavaScript？

雖然CSS強大，但它不是萬能的。

請在以下情況選擇JavaScript：

需要動態數據（如實時更新）。
復雜業務邏輯（比如帶API調用的表單驗證）。
無障礙需求（例如為屏幕閱讀器使用ARIA live區域）。

總結

JavaScript固然強大，但CSS能做的，盡量用CSS！

這樣代碼更簡潔，性能更好。

下次寫簡單的UI交互時，先問問自己：

這能用CSS完成嗎？

答案往往是“可以”。??

責任編輯：武曉燕來源：大遷世界