!important 的正確使用時機

!important 會強制打斷正常的 css 修改邏輯權重

在我十年的工作經驗中,只有兩種情況會這樣用

第一個是寫 utility css class 的時候

例如 .text-center .text-right 這種輔助功能性的 css class

比方說參考 bootstrap 的相關文件

https://getbootstrap.com/docs/5.3/utilities/api/

這些 css class 看命名就知道有一種「這元素就是要這樣式」的感覺

所以加上去會蓋過其他所有 css class,但是這沒問題,不會造成維護的困擾

別人一看就知道是 utility class 在作用


第二個情況是,當你確認自己在對某元素進行「最終維護」的時候

也就是幾乎結束的專案,最後一次幫客戶修改,你很確定有些元素之後不會再擴充、再修改了

這時有些樣式會偷懶 !important 亂加一通 改完就不想管了

當同事濫用導致 code 難以維護

實務上來說,除了上述兩種情況之外,使用 !important 都是「完全不可接受的」!

當專案內出現大量 !important 時,會讓 css 難以維護,甚至是無法維護!

就我個人經驗來說,這情況非常慘,是一種「重大技術債」

也就是代價很高,會開始不斷支付利息,然後很沒效率

現階段的務實處理

這個情況的出現,代表圖隊內有人「經驗不足」或者是「缺乏責任感」

需要適當反應、溝通,避免未來再出現這情況

第一種辦法是 相關樣式通通重寫!這個成本很高,但專案若還需要長期維護很久,可能必須這樣

第二種辦法是,讓相關 PM 與資深工程師知道這個情況的存在

他們會可以理解:相關 code 修改起來的時間,難以預期、難以估計!分配安排上,要考量到這點,甚至避免相關樣式的改動

總而言之,這情況,算是相當「雷」了

工作上,千萬別當濫用 !important 的人

最後補充

在程式設計領域,各種套件、協定、API

在設計的時候,有些功能會提供給大家用,但希望大家盡量少用

這種時候,通常會讓函式名稱、變數名稱、或者是相關命名「長得很奇怪」

比方說突然有一個「全英文大寫的命名」、「很冗長的函式命名」、「用奇怪的底線前後包住的命名」、「使用奇怪的特殊符號的命名」

這些就是「知道你可能必要時刻會需要用,但是非常不鼓勵使用」的 API,所以故意讓你打字累一點、而且會察覺到自己在幹嘛

!important 就是屬於這類東西,打起來很怪很累,所以當然不應該濫用


以上,簡單分享

按讚的人:

共有 1 則留言