CSS ！重要：它是什麼以及何時使用它

已發表: 2020-06-27

CSS 中最有用和最有爭議的元素之一是!important屬性。 每個設計師都會在某個時候遇到 CSS 代碼中的標籤。 發生這種情況時出現的真正問題和困境是“它是否正確使用？” 因為 CSS !important是一個如此強大的工具，開發人員和設計人員在使用它時需要了解最佳實踐。 CSS !important 會導致各種意大利麵條式代碼，這對任何人都不利。

什麼是 CSS 重要？

CSS 中的!important屬性表明它所附加的任何規則優先於其他規則。 它是元素和與其一起使用的選擇器的重中之重，因此讓開發人員和設計人員可以對網站各個部分的樣式進行特定控制。 在大多數情況下，這意味著覆蓋style.css或custom.css 中包含的站點的默認樣式。

!important 的每個實例僅適用於它出現的特定行。 因此，您可以在片段的某些部分（但不是全部）上使用該屬性。 !important的 CSS 代碼如下所示：

.example-class {
	color:#fff!important;
}

!important要記住的主要事情有兩個：

  1. “重要”一詞必須始終以感嘆號(!)
  2. 分號必須始終位於行尾，在 !important 聲明之後

!important甚至可以在逐頁或逐模塊的基礎上使用（在像 Divi 這樣的頁面構建器的情況下），如果你願意的話——儘管這就是你如何進入覆蓋哪個元素的意大利麵條式代碼哪個頁面，按什麼順序？

每個設計師在某個時候都會遇到 CSS 重要標籤，並且必須做出決定。 這是否值得覆蓋網站的默認樣式？

有時，答案是肯定的。 其他時候，這是一個艱難而快速的不。 讓我們看一下 CSS 的一些最佳實踐，以了解它何時可能不會破壞任何東西，無論是現在還是將來。

何時使用 CSS 重要

!important的主要（也是最廣泛接受的）用途是當您希望與主要選擇器交互的類具有不同的樣式時。 也許您希望博客上的標題和元信息的字體和顏色與網站的其餘部分不同。 這些元素的默認樣式繼承自 CSS 文件中的h1和p選擇器。 您在.css文件或 WordPress 主題定制器中為站點默認設置的任何內容都將顯示。

p {
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #111;
	font-family:'Roboto';
}

h1 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #000;
	font-family:'Lato';
}

您可以使用 classes 更改所需的單個元素（博客文章標題和元信息）。 條目標題和.post-meta。 並且由於您希望它們仍然從父h1和p繼承一些樣式，因此您將使用h1.entry-title和p.post-meta來專門調用它們。

h1.entry-title, p.post-meta {
	color: white!important;
	font-family:'Poppins'!important;
}

將這些片段放在同一個樣式表中將導致頂部代碼在所有情況下生效，除了顯示帖子標題和帖子元。 CSS important 屬性會覆蓋默認值，並讓您可以對其進行精細控制。

這種個性化定制是!important的主要用途。 但不是唯一的。

使用 CSS 重要來保護類、ID 和元素

您還可以使用!important來確保頁面的各種元素面向未來，網站的進一步開發可能會以意想不到的方式進行調整。 例如，您可以為訂閱框或電子郵件選擇加入或 YouTube 嵌入開發特定樣式。 其中每一個都可能從不同位​​置的樣式表繼承不同的樣式。 使用!important標籤可以使它需要一個刻意的手來改變你的表單或按鈕的樣式。

只需使用類或 ID 命名元素，然後將!important放在每一行上。

.youtube-embed {
	font-family:'Exo'!important;
	font-weight: 700!important;
	line-height:1.4rem!important;
	margin-top:25px!important;
	margin-left:auto!important;
	margin-right:auto!important
	color:#449928!important;
	padding:11px!important;
	background:#998899;
}

瞧！ 從樣式表中的定期更改中可以適應未來。

使用內聯樣式

這是許多人可能會或可能不會出現的用例之一。 它曾經很常見，但隨著我們不再手動編碼我們的帖子和頁面，它變得越來越少。 但是，如果您深入研究 Gutenberg 塊的 HTML 或 WordPress 經典編輯器的文本視圖，您絕對可以將!important與內嵌 CSS 樣式結合使用。

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

這很重要，原因有幾個。 首先，您可以使用style="x:y!important;"專門控制頁面中的任何代碼行。 第二個是您可以覆蓋任何已應用於該頁面的 CSS。 即使該值也有!important 。 例如：

<style> 
	p { 
	    color:#313373!important;
	    font-size:2rem; 
	} 

    </style> 

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now, even though there's another !important tag
		applied to the paragraph selector on this page!</p>
</div>

即使使用<style></style> 的嵌入式 HTML 樣式在同一選擇器上使用!important ，針對特定段落的內嵌 CSS 將是呈現的樣式。

小心堆疊重要標籤

讓我們舉最後幾個例子，並發出警告。 這些類型的用途在小劑量下很好。 您可以一次性使用它們，而且可能沒有人會遇到問題。 因為，作為一次性，您專門使用!important來設計單個元素的樣式。 這就是它的用途。

但是，如果您開始使用!important作為拐杖，作為一種避免頻繁編輯樣式表的方法或作為同一站點上多個問題的快速修復，那就是意大利麵條式代碼的開始。 特別是對於不是你的未來開發者。 雖然您可能很難弄清楚!important的呈現順序，但未來的開發人員可能會發現這是不可能的。

最終會發生的事情是，站點中有太多堆疊的!important與多個樣式表、頁面和模塊交互，而普通的 CSS 很少呈現。 有時，即使是標記為!important 的東西也不會呈現。 或者更糟的是，之後的每個更改都必須標記為!important才能顯示出來，除非您想拆除站點的樣式並重新構建它。

包起來

CSS important 老實說是設計師工具包中最強大的工具之一。 您可以輕鬆調整站點上的任何元素，而不必擔心影響任何下屬或同級。 但是如果你過度使用它，效果可能會級聯成一個頁面和元素試圖相互覆蓋的噩夢，曾經重要的東西已經成為默認值，但不能設置為默認值。 所以盡量少用!important ，這樣當你確實需要一些東西來脫穎而出或面向未來時，你就以正確的方式去做。

你覺得在你的項目中使用 CSS !important 感覺如何？

文章精選圖片由 wan wei/shutterstock.com 提供