為什么有些事情用CSS就夠了，不必非用JavaScript？
JavaScript確實(shí)強(qiáng)大，這是毋庸置疑的。
但你知道嗎？其實(shí)不一定每次都需要它。
事實(shí)上，JavaScript越少，網(wǎng)站性能往往越好。
為什么要減少JavaScript的使用？
想象你背著一個(gè)沉重的背包跑馬拉松，這就是你網(wǎng)站加載多余JavaScript的感覺。
每一行JavaScript都會(huì)增加“負(fù)擔(dān)”：
- 減少JavaScript，性能更佳。
- CSS解析執(zhí)行更快。
- JavaScript會(huì)觸發(fā)重渲染，CSS則不會(huì)。
- JavaScript錯(cuò)誤可能導(dǎo)致頁(yè)面崩潰，CSS出錯(cuò)影響很小。
當(dāng)然，我不是說(shuō)完全不使用JavaScript。
只是當(dāng)CSS能優(yōu)雅完成某件事時(shí)，何必讓事情復(fù)雜化呢？
1. 懸停顯示子菜單
下拉菜單你見過(guò)不少。
大多數(shù)開發(fā)者習(xí)慣用JavaScript來(lái)控制顯示隱藏，但其實(shí)CSS的:hover就能搞定。
HTML結(jié)構(gòu)示例：
<nav>
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">關(guān)于</a></li>
<li>
<button>博客 ↓</button>
<ul>
<li><a href="#">新聞</a></li>
<li><a href="#">訪談</a></li>
<li><a href="#">旅游</a></li>
<li><a href="#">藝術(shù)</a></li>
<li><a href="#">科技</a></li>
</ul>
</li>
<li><a href="#">聯(lián)系</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);
}無(wú)需JavaScript，菜單平滑顯示。
2. 純CSS標(biāo)簽頁(yè)切換
需要做標(biāo)簽頁(yè)切換？
很多人第一反應(yīng)是用JavaScript監(jiān)聽點(diǎn)擊，然后顯示隱藏內(nèi)容。
但CSS的:checked偽類配合兄弟選擇器~就能輕松實(shí)現(xiàn)切換。
HTML結(jié)構(gòu)示例：
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">標(biāo)簽1</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">標(biāo)簽2</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">標(biāo)簽3</label>
<div class="tab-content" id="content1">標(biāo)簽1內(nèi)容</div>
<div class="tab-content" id="content2">標(biāo)簽2內(nèi)容</div>
<div class="tab-content" id="content3">標(biāo)簽3內(nèi)容</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;
}就這么簡(jiǎn)單，純CSS實(shí)現(xiàn)功能完整的標(biāo)簽頁(yè)。
3. 滾動(dòng)捕捉（Scroll Snap）實(shí)現(xiàn)流暢導(dǎo)航
你在電腦上瀏覽YouTube Shorts或Instagram故事時(shí)，那種滑動(dòng)到位的順暢體驗(yàn)，其實(shí)是CSS搞定的！
利用scroll-snap-type和scroll-snap-align輕松實(shí)現(xiàn)。
HTML結(jié)構(gòu)示例：
<div class="scroll-container">
<div class="scroll-item">內(nèi)容1</div>
<div class="scroll-item">內(nèi)容2</div>
<div class="scroll-item">內(nèi)容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屬性，實(shí)現(xiàn)絲滑滾動(dòng)捕捉。
什么時(shí)候還得用JavaScript？
雖然CSS強(qiáng)大，但它不是萬(wàn)能的。
請(qǐng)?jiān)谝韵虑闆r選擇JavaScript：
- 需要?jiǎng)討B(tài)數(shù)據(jù)（如實(shí)時(shí)更新）。
- 復(fù)雜業(yè)務(wù)邏輯（比如帶API調(diào)用的表單驗(yàn)證）。
- 無(wú)障礙需求（例如為屏幕閱讀器使用ARIA live區(qū)域）。
總結(jié)
JavaScript固然強(qiáng)大，但CSS能做的，盡量用CSS！
這樣代碼更簡(jiǎn)潔，性能更好。
下次寫簡(jiǎn)單的UI交互時(shí)，先問(wèn)問(wèn)自己：
這能用CSS完成嗎？
答案往往是“可以”。??
