項目中大量使用css !important 如何破局？

01-14

如何一步一步重構，刪掉important，不是一次性全部刪掉？
大批量刪掉，如何保證UI無變化？？？？

僅供參考，概不負責。

重構，或者再次用!important覆蓋。(^_^)

瀉藥

不知道

只能一點點的的慢慢改了吧

用window.getComputedStyle遍歷頁面內所有主要元素節點，然後導出合併成一個CSS文件，我還沒試啊，也不知道有沒有用。

control + f !important

搜索到的有的全部comment掉。

然後修壞掉的部分。

很容易。這種坑我填過。沒聽起來那麼恐怖。頂多就是一個團隊一天的工作量。需要所有人都在。如果趕上有一些important是js添加的，那就死的連灰都沒了。都找不到是哪來的。

更別提那種用從哪拔下來的css庫的。

個人經驗而言，如果數量大到一定程度，不管怎麼處理都非常困難。

幾個建議，

1，局部重構。你的項目肯定分不同的組件或者頁面，耦合度最低的部分先修，important去掉以後看效果，有錯再調整。

2，可以把有important的用更詳細的選擇器描述，越詳細的selector優先順序越高

3，如果有時間可以建立unit test（TDD），可以用jasmine或者類似的工具，用類似於jquery.css("display")來測試一些關鍵元素的關鍵style不會被改變。但是這個工作量比較大。

4，上面說的也無法完全確保ui不變，你能做的就是改過後先smoke test，確保主要功能不受影響，剩下的見到一處改一處

雖然短期看來性價比不高，但是長期還是必須要改的。

冤孽啊，當斷即斷，從刪代碼到跑路(?ω?)

以前公司的同事就用過!important，關鍵他有的時候還是用在某個class樣式的子標籤下，然後就導致我想在這個class樣式下添加這個標籤時，它的樣式也跟著改變了，而且還改不了……

在群里看見一個人在一個類的每一條屬性後面都加!important

important只應該被允許用來覆蓋掉js添加的樣式，比如那些自己無法控制的js組件加上的width之類，而且使用的時候必須限定css範圍。

除此之外的一切使用均需要打死。

遇到了同樣的問題，想死的心都有了。

這是一條很長的路

顏老師接了一個爛盤啊。

發現哪一處樣式寫進去不生效，然後找到改吧，唉！我聽了都想打人

發現一處修改一處

誰寫的就讓誰重構。

!important不是應該禁用嗎？

//話說最早的時候我也沒少用啊

重構吧，最早用!important的肯定離職了......

Important鏈就是這麼形成的。。估計最早的是為了覆蓋一些設計不好的第三方組件的樣式吧。。