CSS的低權(quán)重原則—避免濫用子選擇器

vslam 發(fā)布于2019-08-30 12:57 / 3476人閱讀

摘要：使用子選擇器，會增加選擇符的權(quán)重，的選擇符權(quán)重越高，樣式越不易被覆蓋，所以除非確定結(jié)構(gòu)非常穩(wěn)定，一定不會再修改了，否則盡量使用子選擇器。在進(jìn)過大量實(shí)踐后，我并不認(rèn)為多有太大的壞處，相反，與使用子選擇器相比，新添加反而跟利于維護(hù)。

CSS設(shè)置的樣式是可以層疊的，如下面[代碼1]
[代碼1]



CSS的低權(quán)重原則

“CSS的低權(quán)重原則”既可以的到“font-size:40px”的樣式，又可以得到“color： red”的樣式。如果兩個不同選擇符設(shè)置的樣式有沖突，又會如何？如下面[代碼2]
[代碼：CSS層疊有沖突的情況]



CSS的低權(quán)重原則

“CSS的低權(quán)重原則”顏色會是什么呢？是對“span”設(shè)置的“color:green”呢，還是第“.test”設(shè)置的“color:red”呢？這就涉及CSS選擇符的權(quán)重問題了。

CSS的選擇符是有權(quán)重的，當(dāng)不同選擇符的樣式設(shè)置有沖突時，會采用權(quán)重高的選擇符設(shè)置的樣式。權(quán)重的規(guī)則是這樣的：HTML標(biāo)簽的權(quán)重是1，class的權(quán)重是10，id的權(quán)重是100，例如p的權(quán)重是1，“div em”的權(quán)重是1+1=2，“strong.demo”的權(quán)重是10+1=11，“#test.red”的權(quán)重是100+10=110.

[代碼2]中，選擇符span的權(quán)重是1，“.test”的權(quán)重是10，所以“CSS的低權(quán)重原則”的color應(yīng)該是red。

但是如果是如下[代碼3]時，又會如何呢？



CSS的低權(quán)重原則

span的標(biāo)簽同時掛了test和test2兩個class，他們的權(quán)重都是10，那么“CSS的低權(quán)重原則”的color又該是哪個呢？如果 CSS選擇符權(quán)重相同，那么樣式就遵循就近原則，哪個選擇符后定義，就采用哪個選擇符的樣式。[代碼3]中test2后定義，所以color會采用“.test2”的設(shè)置為green。

如果改變“.test”和“.test2”定義的位置，如[代碼4]



CSS的低權(quán)重原則

那么 “CSS的低權(quán)重原則”的color就為red了。

需要強(qiáng)調(diào)的是就近原則指的是選擇符的先后順序，而不是掛class名的先后順序，CSS的低權(quán)重原則和CSS的低權(quán)重原則沒有區(qū)別。

CSS選擇符權(quán)重是個容易被忽略的問題。但事實(shí)上如果不太注意選擇符的權(quán)重，常會出現(xiàn)意向不到的小麻煩。例如下面[代碼5]



CSS的選擇符權(quán)重很重要

現(xiàn)在需要將“很重要”三個字設(shè)置為紅色，我們應(yīng)該怎么做呢？
方案一，利用子選擇器，如[代碼6]



CSS的選擇符權(quán)重很重要

方案二，新建class，如[代碼7]



CSS的選擇符權(quán)重很重要

很多工程師推薦使用方案一，因?yàn)槭褂米舆x擇器可以避免新增class，讓HTML代碼更簡潔，這么考慮是有道理的，但如果這時需求有變化，需要添加新的額文字進(jìn)來，如[代碼8]



CSS的選擇符權(quán)重很重要，我們要小心處理

要求我們將“小心處理”設(shè)置為綠色，我們可以這么做，如[代碼9]



CSS的選擇符權(quán)重很重要，我們要小心處理

本以為小心處理會被選擇符font設(shè)置為綠色，但它卻被選擇符權(quán)重更高的“#test span”設(shè)置成了紅色，子選擇器在無意中影響到了我們新添加的代碼。如果想要達(dá)到我們的預(yù)期，我們需要按代碼[9]重寫



CSS的選擇符權(quán)重很重要，我們要小心處理

而如果使用方案二呢？



CSS的選擇符權(quán)重很重要，我們要小心處理

因?yàn)闆]有使用子選擇器，所以我們添加新代碼掛上新的class就可以順利的完成樣式的設(shè)置了。

使用子選擇器，會增加CSS選擇符的權(quán)重，CSS的選擇符權(quán)重越高，樣式越不易被覆蓋，所以除非確定HTML結(jié)構(gòu)非常穩(wěn)定，一定不會再修改了，否則盡量使用子選擇器。為了保證樣式容易被覆蓋，提高可維護(hù)性，CSS選擇符權(quán)重盡可能低。

少用子選擇器，就需要多添加class，在Web標(biāo)準(zhǔn)盛行的初期，很多工程師認(rèn)為多添加class是不好的，如果能使用子選擇器就應(yīng)該盡量使用，使用大量的class的做法叫做“多class癥”。在進(jìn)過大量實(shí)踐后，我并不認(rèn)為多class有太大的壞處，相反，與使用子選擇器相比，新添加class反而跟利于維護(hù)。