CSS工作組在其官方WIKI[1]總結(jié)了這些年CSS在設(shè)計(jì)上犯的46條失誤。這些錯(cuò)誤大體可以概括為5類(lèi)：

• 屬性key、value設(shè)計(jì)失誤
• 布局、對(duì)齊上的設(shè)計(jì)失誤
• 顏色相關(guān)的失誤
• 選擇器設(shè)計(jì)失誤

本文會(huì)選一些「我覺(jué)得有意思」的失誤來(lái)講講。完整的失誤列表見(jiàn)上述官方WIKI。

!important語(yǔ)法

!important語(yǔ)法用來(lái)增加樣式的權(quán)重，畢竟，感嘆號(hào)通常表達(dá)「強(qiáng)調(diào)」的意思。但在編程語(yǔ)言中，!通常是「取反」的意思，比如：

const isValid = true;
!isValid // false

初次接觸CSS的工程師很可能會(huì)覺(jué)得!important是「不important」的意思，這與該語(yǔ)法實(shí)際想表達(dá)的意思完全相反。

所以，工作組認(rèn)為!important是個(gè)糟糕的語(yǔ)法。

z-index語(yǔ)法

z-index屬性用于設(shè)置定位元素及其后代元素或flex元素的Z軸層疊順序，z-index較大的元素會(huì)疊在較小元素的上面。

在編程語(yǔ)言中，index是「索引」的意思，并沒(méi)有表達(dá)出「層疊」的意思。所以，工作組認(rèn)為叫z-order或干脆叫depth（深度）會(huì)更好。

同時(shí)，他們也認(rèn)為，這個(gè)屬性應(yīng)該對(duì)所有元素有效（而不是只對(duì)定位元素及其后代，以及flex元素有效）。

單個(gè)元素margin的塌陷

「margin坍塌」是CSS中的基礎(chǔ)特性，假設(shè)有2個(gè)上下重疊的塊級(jí)元素：

• 上面的元素margin-bottom為20px
• 下面元素margin-top為30px

按照直覺(jué)來(lái)看，他們之間的margin應(yīng)該是50px（20px + 30px），但是由于「margin坍塌」，他們之間的margin為其中較大的值（30px）。

上面是2個(gè)塊級(jí)元素之間的「margin坍塌」。

對(duì)于單個(gè)塊級(jí)元素，也存在「margin坍塌」 —— 如果一個(gè)元素內(nèi)部沒(méi)有內(nèi)容，或者它的內(nèi)容被清除（clear）了，那么這個(gè)元素的上下margin會(huì)發(fā)生塌陷。

這意味著，即使你為元素的頂部和底部都設(shè)置了margin，但實(shí)際上他們會(huì)合并成一個(gè)（值等于兩者中的最大者，而不是它們的總和）。

這種塌陷行為可能會(huì)導(dǎo)致一些讓人懵逼的布局問(wèn)題。比如，你試圖通過(guò)增加一個(gè)元素的margin-bottom來(lái)增加它下面的空間，但不起作用，可能就是因?yàn)樵黾拥?nbsp;margin塌陷掉了。

所以，CSS工作組認(rèn)為這不是個(gè)好設(shè)計(jì)。

rgb與rgba

rgba與hsla都是設(shè)置顏色的屬性，相比于rgb與hsl，他們還可以設(shè)置alpha值（透明度）。

所以，為啥不直接讓rgb與hsl能夠接收第四個(gè)參數(shù)（alpha值）呢？工作組很費(fèi)解 自己當(dāng)初咋想的。

border-radius

border-radius直譯為「邊界半徑」，當(dāng)初應(yīng)該取名叫corner-radius（拐角半徑）。

畢竟，這就是設(shè)置元素拐角處圓角的半徑的啊～～

絕對(duì)定位的替換元素

所謂「替換元素」，是指「外觀和尺寸由外部資源決定」的元素，比如：

• img
• object（嵌入的對(duì)象，如Flash動(dòng)畫(huà)）
• video
• iframe

工作組認(rèn)為，當(dāng)「替換元素」被絕對(duì)定位時(shí)，偏移屬性不應(yīng)該改變?cè)氐奈恢茫鴳?yīng)該改變尺寸。

比如，當(dāng)對(duì)絕對(duì)定位的img設(shè)置left: 20px; right: 20px;，那么他應(yīng)該被拉伸到「從左側(cè)20px到右側(cè)20px」的長(zhǎng)度，而不是移動(dòng)到距離左側(cè)20px的位置。

這個(gè)規(guī)則對(duì)于響應(yīng)式布局是非常有用的，因?yàn)樗试S元素自動(dòng)調(diào)整其大小以適應(yīng)不同的視口寬度。

總結(jié)

上面只是挑了幾個(gè)我覺(jué)得有意思的失誤來(lái)聊。除此之外，還有很多是使用習(xí)慣上的設(shè)計(jì)失誤，個(gè)人認(rèn)為比較主觀。比如：

• 子孫選擇器應(yīng)該使用?符號(hào)，即：

// 當(dāng)前的子孫選擇器
div p {
  color: green;
}
// 期望的子孫選擇器
div ? p {
  color: green;
}

• 兄弟選擇器應(yīng)該用++符號(hào)，即：

// 當(dāng)前的兄弟選擇器
div ~ p {
  color: green;
}
// 期望的兄弟選擇器
div ++ p {
  color: green;
}

不知道上述改動(dòng)，你能接受么？

參考資料

[1]官方WIKI:https://wiki.csswg.org/ideas/mistakes。