什么時候該用!important?

 

在CSS裡面使用!important通常代表你這個人要麼懶惰，要麼自私或者是過於自信。

首先讓那些不知道的人看一下，!important是這么一回事：

 

CSS
p {
    color: red !important;}#thing {
    color: green;}
HTML
<p id="thing">Will be RED.</p>

 

 

這個段落將會是 red的，盡管ID選擇器的優先級更高。但是 !important 規則會覆蓋掉它原本的樣子

 

 

如果CSS濫用 !important 的話將會變成非常難維護。造成這種不幸的一般都是這種步驟：

 

 

1. 為啥我的CSS文件不起作用啦！？
2. (接着就用絕招：!important)
3. OK,可以啦！

 

 

然后下一個同事就會來加上一些新的樣式，他會試着去修改一些CSS樣式，但是他每沒有收到預想中的效果。最終他發現了是   !important搞的鬼。然后他就會去刪掉這些!important，接着再加上他自己的樣式使得效果體現出來。但是，禍不單行，按下葫蘆浮起瓢，這邊搞定了，那邊會因為這次修改而樣式錯了，就這樣陷入了惡性循環。

比較適合使用的情況: 實用的工具類

 

 

那么什么時候使用   !important比較好呢？在我看來，在有實際用途的類里使用是比較合適的。

 

 

比如有一批按鈕。現在假設下你的網頁上有一個 .button  類。不論放在什么元素上面，你都想元素看起來像一個按鈕：特定的字體，圓角，特定的背景顏色與邊框。所以，你這么寫：

 

CSS

.button {
   background: red; 
   color: white;
   padding: 3px;
   border-radius: 5px;
   border: 1px solid black;}
HTML
<a href="#" class="button">Do Thing</a>

 

 

如果元素上面有一個更高級的選擇器，有可能會出現下例的問題：

 

HTML

<section id="content">
   <p>  text text blah <a href="#" class="button">Do Thing</a>  </p></section>
#content a {
   border-bottom: 1px dotted blue;
}

 

 

現在可以看到按鈕會變成虛線的邊框，這個不是你所希望的。可以在看一下效果fiddle.

我不認為這種是CSS本身的問題。但這里我們把一個按鈕的樣子弄糟糕了。

把你的按鈕類變得不容易被覆蓋，使用!important是一個好方法。

 

CSS

.button {
   background: red            !important;
   color: white               !important;
   padding: 3px               !important;
   border-radius: 5px         !important;
   border: 1px solid black    !important;

   /* For good measure */     
   text-decoration: none      !important;}

 

其他補充？

如果你有其他情況覺得比較適合使用，我很樂意聽你講一下:-)