資訊專欄INFORMATION COLUMN
摘要：天生缺乏邏輯性的問(wèn)題導(dǎo)致了預(yù)處理器的出現(xiàn)。這會(huì)導(dǎo)致圈復(fù)雜度問(wèn)題。圈復(fù)雜度對(duì)于來(lái)說(shuō)可能是一種比較高階的原則，但如果我們通過(guò)它來(lái)考量那些蘊(yùn)含在我們寫的選擇器中的邏輯性，那我們也許就能寫出更加優(yōu)秀的代碼。
本文在征得原作者 @csswizardry 同意的情況下，翻譯自他博客中的文章：Cyclomatic Complexity: Logic in CSS。最初發(fā)布于我的個(gè)人博客：咀嚼之味
另外呢，@hax前輩對(duì)本文的原作者的理論嗤之以鼻。所以加一句：盡信書，則不如無(wú)書。各位看官自己掂量著吧~
在過(guò)去的很長(zhǎng)一段時(shí)間中，我們都說(shuō) CSS 是不帶有任何邏輯的，意思是在 CSS 中沒有控制流，也沒有某種類似于其他編程語(yǔ)言的方式來(lái)組織 CSS。CSS 天生缺乏邏輯性的問(wèn)題導(dǎo)致了預(yù)處理器的出現(xiàn)。然而業(yè)界卻對(duì) CSS 預(yù)處理器褒貶不一，支持預(yù)處理器的人認(rèn)為這彌補(bǔ)了 CSS 缺失的特性；而反對(duì)預(yù)處理器的人則認(rèn)為 CSS 的設(shè)計(jì)初衷就不應(yīng)該帶有邏輯性，他們認(rèn)為根本不應(yīng)該引入預(yù)處理器這個(gè)概念。
然而，一種獨(dú)特的思考方法最近突然蹦入了我的腦袋。它讓我感到 CSS 確實(shí)擁有邏輯性！很少有人真正那么想過(guò)，這大概也是我們一直認(rèn)為 CSS 的邏輯性匱乏的最大原因吧。
我發(fā)現(xiàn)我們可以將復(fù)合選擇器理解為：主體部分 + 條件部分。首先來(lái)看一個(gè)例子：
div.sidebar .login-box a.btn span {
/*...*/
}
在這個(gè)復(fù)合選擇器由主體部分是 span，而條件部分是 IF (inside .btn) AND IF (on a) AND IF (inside .login-box) AND IF (inside .sidebar) AND IF (on div)。
也就是說(shuō)，一個(gè)選擇器的每一部分都是一個(gè) if 語(yǔ)句，需要在解析選擇器時(shí)被滿足（或者不滿足）。有了這種微妙的而又全新的認(rèn)識(shí)，如今我們回頭再看看自己曾經(jīng)寫出的 CSS 代碼，我們將會(huì)意識(shí)到選擇器寫的好或者壞，會(huì)對(duì)效率產(chǎn)生直接的影響。我們真的會(huì)寫出下面這段邏輯嗎？（偽代碼）：
@if exists(span) {
@if is-inside(.btn) {
@if is-on(a) {
@if is-inside(.login-box) {
@if is-inside(.sidebar) {
@if is-on(div) {
# Do this.
}
}
}
}
}
}
也許不會(huì)。這看上去太不直接，也太啰嗦了。我們也許只需要這么寫：
@if exists(.btn-text) {
# Do this.
}
每當(dāng)為選擇器添加一層限制，其實(shí)我們也就是添加了額外的一個(gè) if 語(yǔ)句。這會(huì)導(dǎo)致圈復(fù)雜度問(wèn)題（Cyclomatic Complexity)。
圈復(fù)雜度在軟件工程中，圈復(fù)雜度是一種程序復(fù)雜性的一種度量標(biāo)準(zhǔn)，它一般計(jì)算程序中的控制流的數(shù)量（如 if, else, while 等）。程序中存在越多的控制流，則圈復(fù)雜度就越高。我們自然想要保證圈復(fù)雜度能夠盡量地低，因?yàn)槿?fù)雜度越高：
代碼就越難推導(dǎo)
更多潛藏著的、可能會(huì)導(dǎo)致失敗的問(wèn)題
代碼更難以修改、維護(hù)以及復(fù)用
你需要考慮更多代碼執(zhí)行的結(jié)果與其副作用
編寫測(cè)試代碼的難度也會(huì)更高
從圈復(fù)雜度的角度來(lái)思考 CSS 的解析過(guò)程，我們可以看到瀏覽器在渲染樣式之前需要做許多的決定。我們寫的選擇器中的 if 語(yǔ)句越多，這個(gè)選擇器的圈復(fù)雜度就越高，這也意味著我們寫的選擇器越糟糕，為了使得這一條選擇器規(guī)則滿足，就有需要匹配更多的條件。同時(shí)，我們寫的選擇器也會(huì)缺乏清晰度和復(fù)用性，因?yàn)橐肓诉^(guò)多不必要的 if 語(yǔ)句會(huì)導(dǎo)致不準(zhǔn)確的匹配(false positive)。
相比于將 span 嵌套于 .btn 內(nèi)部并寫一大堆限制條件，更好地做法應(yīng)該是創(chuàng)建一個(gè)新的類 .btn-text 來(lái)描述這個(gè) span。這樣做更加直截了當(dāng)，同時(shí)也更為簡(jiǎn)潔和健壯（越多的 @if 語(yǔ)句導(dǎo)致選擇器規(guī)則越不容易被滿足）。
值得注意的是瀏覽器解析你寫的選擇器的方式：從右向左。如果你在寫你的選擇器時(shí)，第一個(gè)想到的問(wèn)題是：“這是一個(gè) span 元素嗎？” 那你通常就會(huì)把選擇器寫的過(guò)于冗繁。你應(yīng)該從另一個(gè)角度思考，寫出清晰準(zhǔn)確的選擇器規(guī)則，徹底摒棄那些冗余的條件語(yǔ)句。
請(qǐng)不要寫過(guò)于寬泛的規(guī)則，導(dǎo)致你寫的選擇器在匹配開始時(shí)就選中大量的 DOM 元素——然后不得不逐步通過(guò)更多的條件語(yǔ)句來(lái)刪減匹配的對(duì)象。從選擇器的規(guī)則解析的一開始就匹配盡量少的元素才是一種更棒的方法。
圈復(fù)雜度對(duì)于 CSS 來(lái)說(shuō)可能是一種比較高階的原則，但如果我們通過(guò)它來(lái)考量那些蘊(yùn)含在我們寫的選擇器中的邏輯性，那我們也許就能寫出更加優(yōu)秀的代碼。
一些易于遵守的小規(guī)則，
讓你的選擇器最簡(jiǎn)化：每一次你想要為選擇器添加規(guī)則時(shí)，你都在添加額外的 if 語(yǔ)句。將這些 if 語(yǔ)句大聲地讀出來(lái)，仔細(xì)考慮它們是否有添加的必要。你需要時(shí)刻保持你寫的選擇器足夠合理與簡(jiǎn)潔。
保證圈復(fù)雜度最小化: 使用像 Parker 這樣的工具來(lái)測(cè)試你寫的選擇器的圈復(fù)雜度（參考文檔：Identifiers Per Selector）
如果你不需要這個(gè)檢驗(yàn)條件，那就不要把它放進(jìn)選擇器: 有時(shí)在 CSS 中使用嵌套結(jié)構(gòu)是有必要的，可在大多數(shù)時(shí)候并不是，你甚至不能完全相信Inception Rule。
從右邊考慮選擇器如何編寫: 從需要匹配的那類元素開始，寫盡量少的額外的 CSS 代碼來(lái)完成一次正確的匹配。
寫選擇器時(shí)擁有明確的目的性: 確保你寫的選擇器確實(shí)是你想要的，而不是那些碰巧能使得頁(yè)面正常顯示的代碼。
你的選擇器是你的 CSS 結(jié)構(gòu)最基本的組成部分，一定要確保你寫的代碼足夠合理而簡(jiǎn)練。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111074.html
摘要：前端性能優(yōu)化的涉及點(diǎn)從服務(wù)器到協(xié)議再到宿主環(huán)境本身都要有比較深刻的認(rèn)識(shí)，業(yè)界目前主要還是以雅虎總結(jié)出來(lái)?xiàng)l前端性能優(yōu)化的黃金軍規(guī)為參考。 歡迎大家前往騰訊云技術(shù)社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 導(dǎo)語(yǔ) : 從事前端有6年+的時(shí)間了，從最開始的美工到重構(gòu)再到偏向js邏輯開發(fā)的前端開發(fā)，一直在前端這個(gè)行業(yè)里面摸索和學(xué)習(xí)，我現(xiàn)在將自己這些年的一個(gè)心得體會(huì)來(lái)個(gè)系統(tǒng)性的梳理寫成一篇關(guān)于性能優(yōu)化...
摘要：而且我們不需要了解的特別深，函數(shù)式編程很多概念是從范疇論映射過(guò)來(lái)的。了解范疇論相關(guān)概念有助于我們理解函數(shù)式編程。函子函子是用來(lái)將兩個(gè)范疇關(guān)聯(lián)起來(lái)的。 在前面幾篇介紹了函數(shù)式比較重要的一些概念和如何用函數(shù)組合去解決相對(duì)復(fù)雜的邏輯。是時(shí)候開始介紹如何控制副作用了。 數(shù)據(jù)類型 我們來(lái)看看上一篇最后例子： const split = curry((tag, xs) => xs.split(ta...
摘要：回到純靜態(tài)頁(yè)面開發(fā)階段，讓頁(yè)面不需要后端渲染也能跑起來(lái)。改造開始本文著重介紹如何將靜態(tài)頁(yè)面改造成后端渲染需要的模板。總結(jié)在后端渲染的項(xiàng)目里使用多頁(yè)應(yīng)用架構(gòu)是絕對(duì)可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000820338...
摘要：回到純靜態(tài)頁(yè)面開發(fā)階段，讓頁(yè)面不需要后端渲染也能跑起來(lái)。改造開始本文著重介紹如何將靜態(tài)頁(yè)面改造成后端渲染需要的模板?？偨Y(jié)在后端渲染的項(xiàng)目里使用多頁(yè)應(yīng)用架構(gòu)是絕對(duì)可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000820338...
閱讀 3175·2021-11-22 14:45
閱讀 3331·2019-08-29 13:11
閱讀 2333·2019-08-29 12:31
閱讀 948·2019-08-29 11:21
閱讀 3012·2019-08-29 11:09
閱讀 3642·2019-08-28 18:11
閱讀 1450·2019-08-26 13:58
閱讀 1320·2019-08-26 13:27
