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

那么，隨著時間的流逝，我們如何保持低特異性呢？

給自己上課

也許您正在編寫一個高專用選擇器，因為您要覆蓋一個已經存在的選擇器。 也許您要選擇的元素包含在多個頁面中，因此您可以從較高級別的類中進行選擇：

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

無論您對此有何感受，都應認識到這里的特異性正在蔓延。 為避免這種情況，有沒有辦法改變您要直接設置樣式的元素上的類名？ 有時創建一些服務器端幫助函數或變量來發出類可能會有所幫助，以避免視圖中的邏輯。

<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 */ }

考慮樣式表的源順序

沿著相同的嘗試覆蓋事物的脈絡，也許您正在應用其他類名來為您處理樣式覆蓋。

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

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

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

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

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

您知道他們說的要比讓他們發現更好的事情。 你應該那樣做。

如果元素上有一個ID，而這正是它的樣式，可以將其刪除嗎？ 一定要在項目范圍內搜索#that，然后再進行搜索。 它可能被用作JS鉤子（完全可以），在這種情況下，您應該不理會它，或者添加一個類或將已經使用的類用于CSS。

不要回避上課的開始

我已經知道使用像這樣的選擇器：

.module > h2 {}

這樣做會很好，直到他們今天想要該h2元素的特殊樣式。 您可能會進入標記并像這樣：

<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! */ }

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

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

感覺起來像是更繁瑣的前期工作，因為您可能不需要立即使用這些課程。 但是，通過避免這項工作（不要偷懶！），以后使用的鉤子可以節省您的悲傷。

使用級聯

隨著項目的老化，改變具有低特異性的選擇器變得越來越危險，因為選擇器可能會影響更多事物并產生意想不到的后果。

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

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

使用樣式庫和/或樣式指南和/或原子設計

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

原子設計 （ 書 ）可以指導您構建網站（或模式庫）的方式，因此，即使您沒有所需的完整模式，也可以在其下方找到構建塊。

樣式指南可能會救您，因為它可能會強制執行有關特定性的特定規則，以使您免于自己。

考慮選擇排版

同時，您嘗試使用級聯并為許多元素設置智能默認值，有時您可能希望對某些智能默認值進行范圍劃分。 例如，列表元素通常用于導航和內容內。 它們的樣式將完全不同。 因此，為什么不從頭開始， 只在需要時應用文本樣式。

/* 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 */ }

這的確增加了這些文本選擇器的特異性，但這意味著專門針對文本的規則所產生的影響并沒有超出它們所需要的范圍，并且對替代的需求也越來越少。

超出您控制范圍的問題

也許某些第三方代碼期望或將某些HTML注入您的頁面。 您必須使用它。 您仍然可以嘗試使用盡可能低的特異性選擇器。 您可以在代碼中留下注釋，以指示選擇器為何如此。 您可以使用低特異性選擇器，但可以使用！important覆蓋。 您可以詢問負責非理想代碼的人員是否可以解決它。

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

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

標簽限定符是最低可能的特異性升級。

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

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

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

僅僅因為嵌套很好，并不意味著必須提高特異性

有時不建議在預處理器中進行嵌套，因為這樣可以輕松編寫過多的選擇器。 但是嵌套有時在樣式表中看起來很漂亮，因為它可以將內容組合在一起，從而更易于閱讀和消化。

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

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

單類包裝器

處理覆蓋的一種相當有力的方法是在需要將樣式覆蓋應用于或添加新覆蓋元素的區域上使用現有的包裝元素。

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

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

.override .existing { }

只有一次

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

您可以只給自己一個類供您使用嗎？ 單個替代實際上可能是有效的，就像對模式進行變體而不是創建新模式一樣。 超越會導致混亂和進一步戰斗。

下次再做就更好

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。