二十二世纪古墓奇兵爱慕影院

小梁建站專注重慶中小企業網站建設SEO優化,讓您網站更具價值!

當前位置:首頁 > WEB前端學習 > 工具類(utility class)使用“!important”實現不變性,可能么?

工具類(utility class)使用“!important”實現不變性,可能么?

時間:2018-08-18 00:00 來源:重慶網站制作公司(www.l2qz.net) 作者:重慶網站建設公司

       工具類(utility class)使用“!important”實現不變性可能么?


 工具類(utility class)使用“!important”實現不變性可能么?

  我真的非常喜歡不變性。一個東西在創建之后就再也不會發生改變,聽起來超棒!如果我們知道某個東西永遠保持不變,那寫起代碼來不就輕松多了嗎?我真的超級喜歡不變性!

  不過在 CSS 中想實現不變性難度很大,因為 CSS 是基于繼承設計的,其中大量應用到可變性。不過有一種特殊的類型能充分利用不變性,并且不會帶來任何問題:工具類(utility class)。

  工具類是一些非常簡單的類,用于解決非常具體、非常明確的問題。比如:

  .u-text-center { text-align: center; }.u-float-left { float: left; }.u-text-large { font-size: 48px; }

  它們都以 u-開頭,告訴開發者它們是做什么用的,并且它們只包含一條樣式。

  上面這段代碼中,所有的聲明都不包含 !important,但是它們真的真的應該這樣做。原因如下:

  在 HTML 中使用 u-text-center這樣的類時,我們做了一個非常確定、清晰的決定,那就是我們想讓一段文字居中顯示。毫無疑問是這樣的。然而, .u-text-center{}選擇器的優先級相對比較低,因此其他選擇器可能會在無意中覆蓋它。看看下面的例子:

  .sub-content h2 { ... text-align: left;}.u-text-center { text-align: center;}

  ...

  不幸的是, .sub-content h2{}的優先級比 .u-text-center{}高,所以 h2最后還是左對齊,雖然我們設置了 text-align:center;。這里就有問題了, u-text-center無法讓某些內容居中。

  簡而言之,這就是為什么我們應該在工具樣式中使用 !important。我們希望工具樣式是不變的;無論在什么情況下,當我們使用 u-text-center的時候,一定是想要讓文字居中。

  給工具類加上 !important,讓它們不可變。

  當然了,在一個完美世界中(無論是什么世界),我們可以杜絕 .sub-content h2{}這樣的選擇器出現在 CSS 中,但是我們無法避免:

  其他人編寫這樣的 CSS 選擇器;

  項目中之前已經有這樣的選擇器。

  具備適應性和防御性的系統的設計目標并不是完美世界,而是現實世界。在現實世界中,人們就是會寫出各種各樣的 CSS。使用 !important實現不變性會避免其他人帶來的各種沖突。

版權聲明:本文:工具類(utility class)使用“!important”實現不變性,可能么? 由重慶網站制作公司(www.l2qz.net)原創內容,如需要轉載請注明原文網址:重慶網站建設公司http://www.l2qz.net/

 
喜歡看,就分享到:

圍觀: 9999次 | 責任編輯:重慶網站建設公司

回到頂部
二十二世纪古墓奇兵爱慕影院 皇家社会VS莱加内斯 11选5计划免费软件 幸运农场开奖结果 FIFA手游ignite引擎 雄鹿vs掘金 万圣节财富2援彩金 北京赛车pk开奖直播手机版 亚马逊的秘密彩金 篮球巨星排行榜 赫塔费vs皇家贝蒂斯 亚眠vs巴黎圣日耳曼 穿越火线刷枪