保持項(xiàng)目中所有選擇器的CSS專用性較低是一個(gè)值得追求的目標(biāo)。 通常，這表明事物處于相對(duì)和諧狀態(tài)。 您并不是在與自己作斗爭(zhēng)，并且有足夠的空間在需要時(shí)覆蓋樣式。 選擇器的特異性會(huì)隨著時(shí)間的流逝而逐漸增加，對(duì)此有一個(gè)嚴(yán)格的上限。 我敢肯定，我們所有人都感受到了！important標(biāo)簽和內(nèi)聯(lián)樣式的痛苦。

那么，隨著時(shí)間的流逝，我們?nèi)绾伪３值吞禺愋阅?#xff1f;

給自己上課

也許您正在編寫一個(gè)高專用選擇器，因?yàn)槟采w一個(gè)已經(jīng)存在的選擇器。 也許您要選擇的元素包含在多個(gè)頁(yè)面中，因此您可以從較高級(jí)別的類中進(jìn)行選擇：

.section-header {/* normal styles */ }body.about-page .section-header {/* override with higher specificity */ }

無(wú)論您對(duì)此有何感受，都應(yīng)認(rèn)識(shí)到這里的特異性正在蔓延。 為避免這種情況，有沒(méi)有辦法改變您要直接設(shè)置樣式的元素上的類名？ 有時(shí)創(chuàng)建一些服務(wù)器端幫助函數(shù)或變量來(lái)發(fā)出類可能會(huì)有所幫助，以避免視圖中的邏輯。

<header class="<%= header_class %>">Which could output one class, or both, as desired. </header> .section-header {/* normal styles */ }.about-section-header {/* override with same specificity *//* possibly extend the standard class */ }

考慮樣式表的源順序

沿著相同的嘗試覆蓋事物的脈絡(luò)，也許您正在應(yīng)用其他類名來(lái)為您處理樣式覆蓋。

<header class="section-header section-header-about"></header>

但是，使用.section-header-about編寫覆蓋樣式的位置實(shí)際上已被現(xiàn)有類覆蓋。 由于樣式表中的選擇器順序，可能會(huì)發(fā)生這種情況。 兩個(gè)選擇器都具有完全相同的特異性，因此從宣布最后一個(gè)獲勝者中選出的規(guī)則。

要解決此問(wèn)題，僅需確保以后再寫覆蓋類。 也許組織您的樣式表，例如：

@import "third-party-and-libs-and-stuff";@import "global-stuff";@import "section-stuff";@import "specific-things-and-potential-overrides";

降低您要覆蓋的事物的特異性

您知道他們說(shuō)的要比讓他們發(fā)現(xiàn)更好的事情。 你應(yīng)該那樣做。

如果元素上有一個(gè)ID，而這正是它的樣式，可以將其刪除嗎？ 一定要在項(xiàng)目范圍內(nèi)搜索#that，然后再進(jìn)行搜索。 它可能被用作JS鉤子（完全可以），在這種情況下，您應(yīng)該不理會(huì)它，或者添加一個(gè)類或?qū)⒁呀?jīng)使用的類用于CSS。

不要回避上課的開(kāi)始

我已經(jīng)知道使用像這樣的選擇器：

.module > h2 {}

這樣做會(huì)很好，直到他們今天想要該h2元素的特殊樣式。 您可能會(huì)進(jìn)入標(biāo)記并像這樣：

<div class="module"><h2 class="unique">Special Header</h2> </div>

但可悲的是：

.module > h2 {/* normal styles */ } .unique {/* I'm going to lose this specificity battle */ } .module .unique {/* This will work, but specificity creep! */ }

由于原始選擇器在咬我們，所以發(fā)生了特異性蠕變。 這就是幾乎所有CSS方法學(xué)都建議采用扁平結(jié)構(gòu)的原因：

<div class="module"><h2 class="module-header"></h2><div class="module-content"></div> </div>

感覺(jué)起來(lái)像是更繁瑣的前期工作，因?yàn)槟赡懿恍枰⒓词褂眠@些課程。 但是，通過(guò)避免這項(xiàng)工作（不要偷懶！），以后使用的鉤子可以節(jié)省您的悲傷。

使用級(jí)聯(lián)

隨著項(xiàng)目的老化，改變具有低特異性的選擇器變得越來(lái)越危險(xiǎn)，因?yàn)檫x擇器可能會(huì)影響更多事物并產(chǎn)生意想不到的后果。

#im #just .gonna[do] .this .to .be #safe {/* cries (?_??) */ }

但是影響更多的事情是CSS的力量。 有了堅(jiān)實(shí)的基礎(chǔ)，就可以希望減少覆蓋范圍。 為此的策略可以是……

使用樣式庫(kù)和/或樣式指南和/或原子設(shè)計(jì)

模式庫(kù)（ 類似這樣的東西）可能意味著您有需要的東西。 需要一些標(biāo)簽嗎？ 在這里，這是執(zhí)行此操作的既定方法。 而且它的構(gòu)建方式很可能是特異性很輕，因此覆蓋不會(huì)太困難。

原子設(shè)計(jì) （ 書(shū) ）可以指導(dǎo)您構(gòu)建網(wǎng)站（或模式庫(kù)）的方式，因此，即使您沒(méi)有所需的完整模式，也可以在其下方找到構(gòu)建塊。

樣式指南可能會(huì)救您，因?yàn)樗赡軙?huì)強(qiáng)制執(zhí)行有關(guān)特定性的特定規(guī)則，以使您免于自己。

考慮選擇排版

同時(shí)，您嘗試使用級(jí)聯(lián)并為許多元素設(shè)置智能默認(rèn)值，有時(shí)您可能希望對(duì)某些智能默認(rèn)值進(jìn)行范圍劃分。 例如，列表元素通常用于導(dǎo)航和內(nèi)容內(nèi)。 它們的樣式將完全不同。 因此，為什么不從頭開(kāi)始， 只在需要時(shí)應(yīng)用文本樣式。

/* reset styles globally */ ul, ol, li {list-style: none;margin: 0;padding: 0; }/* scope text styles to text content */ .text-content {h1, h2, h3 {}p {}ul {}ol {}/* etc */ }

這的確增加了這些文本選擇器的特異性，但這意味著專門針對(duì)文本的規(guī)則所產(chǎn)生的影響并沒(méi)有超出它們所需要的范圍，并且對(duì)替代的需求也越來(lái)越少。

超出您控制范圍的問(wèn)題

也許某些第三方代碼期望或?qū)⒛承〩TML注入您的頁(yè)面。 您必須使用它。 您仍然可以嘗試使用盡可能低的特異性選擇器。 您可以在代碼中留下注釋，以指示選擇器為何如此。 您可以使用低特異性選擇器，但可以使用！important覆蓋。 您可以詢問(wèn)負(fù)責(zé)非理想代碼的人員是否可以解決它。

僅輕輕地提高特異性，并注意

如果您需要進(jìn)行專一性戰(zhàn)斗，而不是去嘗試像ID??或！important這樣的大錘，可以嘗試一些更輕松的事情。

標(biāo)簽限定符是最低可能的特異性升級(jí)。

ul.override {/* I win */ } .normal { }

但是將選擇器限制為特定標(biāo)簽是一個(gè)奇怪的限制因素。 明智的做法是只添加一個(gè)附加類。 如果另一個(gè)名稱沒(méi)有意義，則根據(jù)需要甚至可以使用相同的類。

.nav.override { } .override.override { } .nav { }

僅僅因?yàn)榍短缀芎?#xff0c;并不意味著必須提高特異性

有時(shí)不建議在預(yù)處理器中進(jìn)行嵌套，因?yàn)檫@樣可以輕松編寫過(guò)多的選擇器。 但是嵌套有時(shí)在樣式表中看起來(lái)很漂亮，因?yàn)樗梢詫?nèi)容組合在一起，從而更易于閱讀和消化。

Bohdan Kokotko最近提醒我，Sass中的＆符實(shí)際上可以用于命名間隔，而不是復(fù)合選擇器。

.what {color: red;&-so {color: green;&-ever {color: blue;}} } .what {color: red; } .what-so {color: green; } .what-so-ever {color: blue; }

單類包裝器

處理覆蓋的一種相當(dāng)有力的方法是在需要將樣式覆蓋應(yīng)用于或添加新覆蓋元素的區(qū)域上使用現(xiàn)有的包裝元素。

<div class="override">... existing stuff ...</div>

現(xiàn)在，您只需在選擇器中添加一個(gè)類即可覆蓋其中的任何現(xiàn)有樣式。 這是專一性，但試圖將其保持在較低水平。

.override .existing { }

只有一次

如果您要覆蓋替代項(xiàng)，那么這是一個(gè)停止并重新考慮的好地方。

您可以只給自己一個(gè)類供您使用嗎？ 單個(gè)替代實(shí)際上可能是有效的，就像對(duì)模式進(jìn)行變體而不是創(chuàng)建新模式一樣。 超越會(huì)導(dǎo)致混亂和進(jìn)一步戰(zhàn)斗。

下次再做就更好

如果您一直被特異性問(wèn)題所困擾，即使立即解決這些問(wèn)題都不切實(shí)際，至少您現(xiàn)在已經(jīng)知道這是有問(wèn)題的，下次可以采取不同的方法。

翻譯自: https://css-tricks.com/strategies-keeping-css-specificity-low/

總結(jié)

以上是生活随笔為你收集整理的降低CSS特异性的策略的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。