不要再濫用css樣式!important規則了
ead>theme: channing-cyan highlight: a11y-dark
持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第1天,點選檢視活動詳情。
不要濫用css樣式!important規則
一、理解 !important 與優先順序無關
有的同學稱 css 的樣式優先順序計算的例外規則-!important規則,為 css 樣式優先順序“最高階”, 這其實有點道理,因為從作用結果上看,這似乎符合事實的。不管內聯樣式, 還是百八十巢狀層的樣式選擇器組合,都可以被 !important 覆蓋。
例如下面這個優先順序權重其實已經很高的樣式,會輕易被 !important 作用的樣式覆蓋。
```css .text { color: green !important; }
body #main .box p span { color: red; } ``` 按照下面的這份樣式優先順序權重規則來看,“body #main .box p span{}” 的優先順序權重大約是 0113, 而 ".text{}" 的優先順序權重大約是 0010。
- css 延時優先順序權重規則說明: 一個選擇器的優先順序可以說是由四個部分相加 (分量),可以認為是個十百千 — 四位數的四個位數:
千位: 如果宣告在 style 的屬性(內聯樣式)則該位得一分。這樣的宣告沒有選擇器,所以它得分總是1000。 百位: 選擇器中包含ID選擇器則該位得一分。 十位: 選擇器中包含類選擇器、屬性選擇器或者偽類則該位得一分。 個位:選擇器中包含元素、偽元素選擇器則該位得一分。
| 選擇器 | 千位 | 百位 | 十位 | 個位 | 優先順序 | |--------------|-----|-----|-----|-----|-------| | body p span | 0 | 0 | 0 | 3 | 0003 | | .box | 0 | 0 | 1 | 0 | 0010 | | #main | 0 | 1 | 0 | 0 | 0100 | | 合計 | 0 | 1 | 1 | 3 | 0113 |
| 選擇器 | 千位 | 百位 | 十位 | 個位 | 優先順序 | |------|-----|-----|-----|-----|-------| | .box | 0 | 0 | 1 | 0 | 0010 | | 合計 | 0 | 0 | 1 | 0 | 0010 |
正如上圖所示,結果很顯然,應用了 ".text{}" 的樣式,文字顏色為 green。 我們要注意,“body #main .box p span{}” 的優先順序權重大約是 0113, 而 ".text{}" 的優先順序權重大約是 0010,前者的優先順序更高,卻應用了後者的樣式, 這是因為 !important 這個例外規則。注意,從技術上講,!important 與優先順序無關, 所以你要算 !important 的優先順序權重是多算?一萬?八千?這沒法算,它是例外規則,與最終的結果直接相關,但是與優先順序無關。
當然,你如果從樣式作用結果的角度理解,認為 !important 具有一個很高的樣式優先順序權重,儘管這個權重值不存在, 但這樣理解問題也不大。但說它是樣式優先順序的例外規則更合適,因為它就是如此設計的。
關於例外規則,這在不合適量化,在某一套計算規則難以算清(難以解釋)的場景下,使用例外規則很有好處。
二、什麼時候可以使用 !important 規則
tips:css 中使用 !important 的合理場景,是去覆蓋糟糕的難以更改的樣式。 注意是覆蓋,而不是一開始寫樣式就使用 !important。覆蓋+難以更改就是我認為的 !important 的合理適用場景。
例如下面的場景:
1.覆蓋內聯樣式
內聯樣式的優先順序權重很高,如果不便於改動原始碼中的樣式,那麼選用 !important 去覆蓋掉原來的內聯樣式是合適的。因為此時,除了改動原始碼,還有什麼合適的辦法可以改動內聯樣式?似乎沒有了吧。然後就是關於“不便改動原始碼”的理解,例如第三方外掛的內聯樣式,這確實不便於改動。如果是自己開發中的專案,那麼改動原始碼可能比起用 !important 去覆蓋更合適。對於一些老舊專案裡面的內聯樣式,這種原始碼是可以動的,但如果你認為“改動原始碼”非常費勁,你也有一點理由去使用 !important,但不太建議。
2.覆蓋優先順序很高的選擇器
除了內聯樣式,還有一種需要使用 !important 的場景,那就是樣式優先順序很高,權重很大的樣式。優先順序很高,權重很大,是啥概念呢?就是除了改原始碼(程式碼),幾乎沒有辦法能改動了。
```
- 複習|js指令碼肯定會阻塞渲染?
- 雙18期|CSS揭祕之簡寫屬性
- 扁平資料轉tree與tree資料扁平化
- CSS揭祕之效能優化技巧篇
- 資料視覺化:核心、互動、分類與工具
- 哇,這個易用工具適合我這水平的人
- 前端技術圖譜:看看你學廢了哪些?
- 雙17期|跨域資源共享:跨域錯誤該前端還是後端處理?
- js對話資料庫體驗:hello-mysql
- CSS揭祕之控制繼承:height能變為可繼承嗎?
- 進階|監控上傳和下載進度
- 今日軟考|普通程式設計師或許更應考軟考
- 一字一圖,領略瀏覽器方向的優化
- 天天用可替換元素(replaced element),竟說不知道
- 不要再濫用css樣式!important規則了
- 適合非大廠的70 面試題(2022-5)
- 11種樣式選擇器與樣式優先順序計算
- 面試|變數提升與函式提升,挑戰下這幾個例子?
- 雙10期|基本物件Error及8種錯誤型別
- 社群資料說話,真的是前端最卷?